Navigation
Navigation is used to display the primary navigation in the sidebar of an application. Navigation includes a list of links that users use to move between sections of the application.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
stickyFooter | sticky-footer | Controls whether the navigations's footer has sticky positioning. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | The main section of the sidebar, for holding nav components. |
header | The top section of the sidebar. |
footer | The bottom section of the sidebar. |
| Event | Detail Type | Description |
|---|---|---|
toggle | NordEvent | Dispatched whenever a nav item's state changes between open and closed. |
activate | NordEvent | Dispatched whenever a nav item has been marked as active |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-navigation-background-color | Controls the background color of the navigation element. | var(--n-color-nav-surface) |
--n-navigation-scroll-shadow-color-start | Color of the scroll-affordance shadow shown at the top of the scroll area (below the header) when sticky-footer is set. Set to transparent to disable. | rgb(0, 0, 0, 0.1) |
--n-navigation-scroll-shadow-color-end | Color of the scroll-affordance shadow shown at the bottom of the scroll area (above the footer) when sticky-footer is set. Set to transparent to disable. | rgb(0, 0, 0, 0.1) |
--n-navigation-scroll-mask | mask-image applied to the scrollable area when sticky-footer is set. Use with the shadow colors set to transparent to replace the dark scroll-shadow with a soft content fade at the edges. Example: linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%). | none |
--n-navigation-padding-block | Block-axis (top/bottom) padding of the | var(--n-space-m) |
--n-navigation-padding-inline | Inline-axis (start/end) padding of the | var(--n-space-m) |
--n-navigation-footer-padding-block | Block-axis (top/bottom) padding inside the footer slot when sticky-footer is set. Has no visual effect when the footer slot is empty (slot is hidden in that case). | var(--n-space-s) |
--n-navigation-footer-padding-inline | Inline-axis (start/end) padding inside the footer slot when sticky-footer is set. Defaults to --n-navigation-padding-inline so the footer aligns with the nav content unless overridden. Has no visual effect when the footer slot is empty. | var(--n-navigation-padding-inline) |
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.
- Group navigation items into navigation groups based on related categories.
- Use group headings to clarify the category of a section.
- Use icons for all top level navigation items.
Don’t
- Don’t place a
<nav>element inside the navigation component, as it already contains one internally.
Content guidelines
When writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Avoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:
Avoid ending item labels in punctuation:
Use as few words as possible to describe each item label:
Avoid all caps for item labels and group titles:
Integration
For integration guidelines, please see Web Components documentation .