NavToggle
Nav toggle hides and shows the primary navigation inside `<nord-layout>`.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
icon | icon | Icon shown in the resting state. Accepts any registered icon name. Defaults to `navigation-toggle`. | string | — |
iconActive | icon-active | Icon shown on hover/focus (≥ 768px), swapping in for `icon`. Defaults to `navigation-toggle-lock`. | string | — |
autoHide | auto-hide | When set, the toggle finds its ancestor `<nord-layout>` and hides itself on wide viewports while the layout's nav is open. Useful when placing the toggle outside the `nav-toggle` slot. | boolean | false |
square | square | Forwards the `square` attribute to the underlying `<nord-button>`, giving the toggle a fixed square footprint instead of the default pill shape. | boolean | false |
size | size | Size of the underlying `<nord-button>`. Defaults to `m`. | 's' | 'm' | 'm' |
iconSize | icon-size | Size of the inner `<nord-icon>` elements. Accepts the same values as `<nord-icon>`'s `size`. Defaults to `m`. | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'm' |
Methods
| Method name | Parameters | Description |
|---|---|---|
focus(options?: FocusOptions) => void | options: An object which controls aspects of the focusing process. | Programmatically move focus to the component. |
blur() => void | N/A | Programmatically remove focus from the component. |
click() => void | N/A | Programmatically simulates a click on the component. |
Dependencies
This component is internally dependent on the following components:
- <nord-button>
Button
Buttons are used for interface actions. Primary style should be used only once per section for main call-to-action, while other styles can appear more frequently.
- <nord-icon>
Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.
- <nord-visually-hidden>
VisuallyHidden
Visually hidden is used when an element needs to be available to assistive technologies like screen readers, but be otherwise hidden.
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use a tooltip with the toggle that’s labelled as
Toggle navigation. - We recommend setting a keyboard shortcut that toggles the navigation.
Don’t
- Don’t use as a generic button or toggle. Use the Button component instead.
Additional considerations
- Used internally by
<nord-layout>as the default contents of itsnav-toggleslot. Can also be placed anywhere inside<nord-layout>(e.g. inside a<nord-header>next to the page title) — the layout listens for clicks on any descendant<nord-nav-toggle>and toggles the navigation accordingly. - Outside of a
<nord-layout>it renders as a presentational button with no behaviour. - The two displayed icons can be customised via the
iconandicon-activeattributes. The first is shown in the resting state; the second replaces it on hover/focus (≥ 768px). - Set
auto-hideto have the toggle disappear automatically when the ancestor<nord-layout>'s nav is open (on wide viewports), mirroring the built-in fallback toggle's behaviour.
Integration
For integration guidelines, please see Web Components documentation .