Usage
The navigation list provides local navigation for the current context and indicates the current view. It is typically placed in the sidebar of the page and changes what is shown in the main area.
Best practices
Do
Use short and scannable labels for navigation items.
Don't
Avoid using long labels. Long text gets truncated.
Do
Use the heading to clarify the navigation’s list category.
Don't
Don’t omit the headings if the navigation list is not self-explanatory.
Do
Use the counter property to add auxiliary information about the navigation item e.g. number of new messages.
Don't
Use counters sparingly as you can overwhelm users and reduce the effectiveness of the feedback. Instead, balance the need for each section and display the strictly necessary.
Don't
- Don't include any elements other than navigation items in the navigation list.
- Don’t add any interactive elements to the navigation item itself.
Nesting
You can use nested navigation to group items that fall under the same feature or category. The navigation list supports 1 level of nesting only.
Do
Group navigation items based on related categories.
Don't
Don’t group items that are not related to each other or to save space.
Examples
Live Preview
Props
Fetching props...
Slots
Fetching slots...
Events
Fetching events...