`<dj-nav>`

A navigation landmark that collapses into a button and a panel when there is not enough room.

This is the "hamburger menu" or "navicon" pattern. A menu button that stays collapsed on a wide desktop screen is a normal use too, not only a mobile layout. Put the links in the default slot as plain <a> elements.

Try it in the playground

@dojo-ng/nav · v0.1.1

npm install @dojo-ng/nav

import "@dojo-ng/nav";

When it collapses

By default the nav collapses when its container is narrower than 45rem.
To change that, set the --dj-nav-collapsed custom property on the element: 1 collapses, 0 expands. Because it is a theme token, not a breakpoint property, it can depend on the container: a nav in a narrow sidebar collapses even on a wide screen.
The component checks again when its own size changes. After a change that does not resize it, such as a theme switch or a media query on the viewport, call refresh().
Only one arrangement is in the DOM at a time: the plain <nav> when expanded, or the button (and, while open, a panel around the same <nav>) when collapsed.

The panel

panel="drawer" (the default) uses <dj-slide-pane>, which opens from the side of the reading direction.
panel="dropdown" and panel="overlay" are drawn inside the component itself.
dj-nav-toggle fires when the panel opens or closes, and dj-nav-collapse when the arrangement changes.

Accessibility

This is a disclosure, not a menu (in APG terms): the links stay plain links in a <nav>, and the button has no aria-haspopup.

Not built

Toolbar-style overflow, which shows what fits and moves the rest into a menu. That is a separate component.

Need one of these? Make a request on Discord or add an issue (work item) on Heptapod.

Properties

Property	Attribute	Type	Default
`label`Accessible name for the `<nav>` landmark.	`label`	`string`	None
`open`Whether the panel is showing. Only meaningful while collapsed.	`open` reflected	`boolean`	`false`
`panel"drawer"` \| `"dropdown"` \| `"overlay"`. Presentation only; independent of the collapse policy.	`panel` reflected	`"drawer""dropdown""overlay"`	`"drawer"`
`triggerLabel`Accessible name for the trigger button.	`trigger-label`	`string`	None
`collapsed`Whether the nav is currently collapsed (trigger + panel) or inline. Managed by the component; consumers treat it as read-only. Reflected so page CSS can style either arrangement.	`collapsed` reflected	`boolean`	`false`

Events

Event	Description
`dj-nav-collapse`	detail `{ collapsed }`
`dj-nav-toggle`	detail `{ open }`

Slots

Slot	Description
Default slot	the links — plain `<a>` elements
`trigger`

CSS parts

Style these with dj-nav::part(name).

triggerpanelnav

Methods

Method	Description
`show()`
`hide()`
`toggle()`
`refresh()`	Delegates to `TokenFlagController` — the escape hatch for a runtime pin or theme switch that `ResizeObserver` cannot see (it only sees size changes).