On this page

Actions & navigation

Nav released

A list of links to an application's screens, each with an icon and a name, and the current one marked — at the side on a wide screen and in a drawer on a narrow one, wherever the application puts it.

Source

Import@pacit/components/nav
Selectorsnav[pctNav], pct-nav-item, a[pctNavLink]

No APG pattern applies, and none is invented — the reasoning is under Accessibility ↓

import { Component, signal } from '@angular/core';
import { PctNav, PctNavItem, PctNavLink } from '@pacit/components/nav';

/**
 * A navigation of three screens, the current one marked by aria-current. The preview renders
 * with no router, so a press only moves the mark; an application's links are `routerLink`.
 */
@Component({
  selector: 'demo-nav',
  imports: [PctNav, PctNavItem, PctNavLink],
  template: `
    <nav pctNav aria-label="Screens" style="inline-size: 200px">
      @for (screen of screens; track screen) {
        <pct-nav-item>
          <a
            pctNavLink
            [href]="'#' + screen"
            [attr.aria-current]="current() === screen ? 'page' : null"
            (click)="$event.preventDefault(); current.set(screen)"
            >{{ screen }}</a
          >
        </pct-nav-item>
      }
    </nav>
  `,
})
export class NavDemo {
  protected readonly screens = ['Rooms', 'Devices', 'Settings'];
  protected readonly current = signal('Devices');
}

nav.demo.ts — the same file runs here and is highlighted under Code

Start here

Usage

One import per component, and the shortest possible use — the package itself is installed once, on the start page.

Import this component

import { PctNav, PctNavItem, PctNavLink } from '@pacit/components/nav';

Exported	What it is
`PctNav`componentunreleased`nav[pctNav]`	An application's navigation: a list of links to its screens, the current one marked.
`PctNavItem`componentunreleased`pct-nav-item`	One screen of the navigation: `role="listitem"`, the step `pct-crumb` is for the breadcrumb.
`PctNavLink`componentunreleased`a[pctNavLink]`	The navigation's link, on the consumer's own anchor: an icon, the screen's name, and the mark of the current screen when the anchor carries `aria-current`.

<nav pctNav aria-label="Screens">
  <pct-nav-item>
    <a pctNavLink routerLink="/rooms" routerLinkActive ariaCurrentWhenActive="page">Rooms</a>
  </pct-nav-item>
</nav>

Examples

Every state, running

Each example is the component itself, not a screenshot. Open the code under any of them.

Links with icons: the icon is silent, the name is what the link is called.

API

What it reads, and what it writes back

Read from the source at build time — the types, the defaults and the lines of documentation are the library's own.

unreleased marks 3 of them: on main, and not in @pacit/components@0.2.0 — the next release names the version.

An application's navigation: a list of links to its screens, the current one marked.

Inputs

Name	Type	What it does
No inputs — the element is configured by its content.

Outputs

None of its own. The native events — (click), (focus), the form's submit — are the platform's, and two-way models above carry the rest.

What it writes on the element

The hooks a stylesheet or a test can hold. Stable by contract — the parts inventory gate fails the build when one disappears.

Attribute	Bound to	Note
`class`	`pct-nav`

Styling

Parts to select, tokens to override

Two ways in, both stable. No class names to depend on.

Parts

In a test, PctNavHarness, PctNavItemHarness, PctNavLinkHarness from @pacit/components/testing read a part by the name below and a state by its attribute — the harness gate holds the names to the package.

Part	Selector	What it is
`list`	`[data-pct-part="list"]`	the `role="list"` inside the landmark
`icon`	`[data-pct-part="icon"]`	the region of the link's icon, at its start
`label`	`[data-pct-part="label"]`	the region of the screen's name

Tokens

Every value the component reads, with the light and the dark default. Override a token at any scope and it cascades like any custom property.

Token	Styles
`--pct-nav-gap{pct.space.2}`4px	Gap between the links.
`--pct-nav-icon-color{pct.text-muted}`#334155 · #e2e8f0	Colour of a link's icon.
`--pct-nav-link-bg-current{pct.primary-100}`#dbeafe · #1e40af	Background of the link to the current screen.
`--pct-nav-link-bg-hover{pct.surface-100}`#f1f5f9 · #1e293b	Background of a link under the pointer.
`--pct-nav-link-fg{pct.text}`#0f172a · #ffffff	Text colour of a link.
`--pct-nav-link-fg-current{pct.on-primary-100}`#1d4ed8 · #bfdbfe	Text colour of the link to the current screen.
`--pct-nav-link-font-weight-current{pct.font.weight.medium}`500	Font weight of the link to the current screen.
`--pct-nav-link-gap{pct.space.3}`8px	Gap between a link's icon and its name.
`--pct-nav-link-height{pct.control.height.md}`36px	Minimum height of a link.
`--pct-nav-link-padding-x{pct.space.4}`12px	Inline padding inside a link.
`--pct-nav-link-radius{pct.radius.md}`8px	Corner radius of a link.
`--pct-nav-marker-color{pct.primary}`#2563eb · #60a5fa	Colour of the bar at the start edge of the link to the current screen.
`--pct-nav-marker-inset{pct.space.3}`8px	How far the bar marking the current screen stands in from the link's top and bottom.
`--pct-nav-marker-width`3px	Width of the bar marking the current screen.

Theming

A brand override in a few declarations. Scope it to a theme attribute, a page or one container — the component never notices.

[data-theme='brand'] {
  --pct-nav-link-bg-current: #ccfbf1;
  --pct-nav-link-fg-current: #115e59;
  --pct-nav-marker-color: #0f766e;
}

Accessibility

Measured, not assumed

Pattern: none — the APG has no pattern for a site's navigation beyond the navigation landmark, which is the consumer's <nav>; inside it a role="list" and a listitem per link, the shape the APG's own examples write, and aria-current="page" on the current screen. Named in the class JSDoc.

Keyboard

key	effect	test
`Tab` / `Shift+Tab`	moves from link to link, in the list's order	`apps/sandbox-e2e/src/frame.spec.ts` — "Tab walks the bar in its reading order, then the navigation"
`Enter`	on a link, follows it	the same case; the following is the platform's

There are no handlers to map: every link is an anchor and answers the keyboard on its own. A roving tab stop would be the menu's pattern, and a navigation is not a menu.

Evidence

What the repository holds for this component

Read at build time from the tracked snapshots, not typed here.

91.67%mutation score11 of 12 mutants killed

—e2e casescovered by the shared suites only

5colour pairs measuredlight and dark, at every token build

0visual baselinesChromium, the sandbox's own pictures

14elements in the preview3 listeners · 1 render to settle · 3729 µs in jsdom, held exactly but for the clock

Known limitations

No groups and no nesting. One flat list of screens; a heading between groups, or a screen with screens under it, is not drawn. A second nav[pctNav] under a heading of the application's is a group.
No rail. There is no narrow form of icons alone between the column and the drawer.
A forgotten aria-current is silent. A page with no current screen is legitimate, so nothing can warn about a link the consumer forgot to mark.
NVDA did not say the first link's name. On entering the navigation in the walk of 2026-11-02 NVDA read Screens, navigation landmark and stopped; the other links it read whole.
It does not close the drawer it stands in. A link pressed in a drawer leaves it open until the application closes it.

pacit

Usage

Every state, running

Links with icons: the icon is silent, the name is what the link is called.

What it reads, and what it writes back

Inputs

Outputs

What it writes on the element

Parts to select, tokens to override

Parts

Tokens

Theming

Measured, not assumed

Keyboard

What is measured, and what is not yet

What the repository holds for this component

Known limitations