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) |
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 .