Side Navigation
- Usage
- Styling
Side Navigation provides a vertical list of navigation links with support for collapsible, nested sections.
|
Note
|
Navigation Disabled in Examples
For technical reasons, actual navigation is disabled in the examples on this page. |
new tab
<vaadin-side-nav style="width:100%" id="sideNav">
<vaadin-side-nav-item path="/dashboard">
<vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
Dashboard
</vaadin-side-nav-item>
<vaadin-side-nav-item path="/inbox">
<vaadin-icon icon="vaadin:envelope" slot="prefix"></vaadin-icon>
Inbox
</vaadin-side-nav-item>
<vaadin-side-nav-item path="/calendar">
<vaadin-icon icon="vaadin:calendar" slot="prefix"></vaadin-icon>
Calendar
</vaadin-side-nav-item>
<vaadin-side-nav-item path="/settings">
<vaadin-icon icon="vaadin:cog" slot="prefix"></vaadin-icon>
Settings
</vaadin-side-nav-item>
<vaadin-side-nav-item path="https://vaadin.com">
<vaadin-icon icon="vaadin:vaadin-h" slot="prefix"></vaadin-icon>
Vaadin website
</vaadin-side-nav-item>
</vaadin-side-nav>The navigation item whose path matches the current URL is highlighted as active. The Side Navigation component can be used, for example, in the drawer of an App Layout.
Prefix & Suffix Elements
Navigation items have slots for prefix and suffix elements. The prefix slot is primarily intended for icons, while the suffix slot can be used, for example, for notification badges.
Interactive prefix and suffix elements aren’t recommended since the entire item row acts as a link.
new tab
<vaadin-side-nav style="width:100%">
<vaadin-side-nav-item path="/inbox">
<vaadin-icon icon="vaadin:envelope" slot="prefix"></vaadin-icon>
Inbox
<span theme="badge contrast pill" aria-label="12 unread messages" slot="suffix"
>12</span
>
</vaadin-side-nav-item>
<vaadin-side-nav-item path="/calendar">
<vaadin-icon icon="vaadin:calendar" slot="prefix"></vaadin-icon>
Calendar
<vaadin-icon
icon="vaadin:bell"
theme="badge error pill"
style="padding:var(--lumo-space-xs)"
aria-label="Upcoming appointment"
slot="suffix"
></vaadin-icon>
</vaadin-side-nav-item>
</vaadin-side-nav>Hierarchy
Navigation items can contain sub-items, which are collapsed by default. There’s no technical limitation on the number of nesting levels, but a maximum of three levels is recommended for better usability.
Parent items can be links. Clicking them expands their sub-items in addition to navigating. Non-link parent items can be achieved by omitting the target path.
new tab
<vaadin-side-nav style="width:100%">
<vaadin-side-nav-item path="/messages">
<vaadin-icon icon="vaadin:envelope" slot="prefix"></vaadin-icon>
Messages
<vaadin-side-nav-item path="/inbox" slot="children">
<vaadin-icon icon="vaadin:inbox" slot="prefix"></vaadin-icon>
Inbox
</vaadin-side-nav-item>
<vaadin-side-nav-item path="/sent" slot="children">
<vaadin-icon icon="vaadin:paperplane" slot="prefix"></vaadin-icon>
Sent
</vaadin-side-nav-item>
<vaadin-side-nav-item path="/trash" slot="children">
<vaadin-icon icon="vaadin:trash" slot="prefix"></vaadin-icon>
Trash
</vaadin-side-nav-item>
</vaadin-side-nav-item>
<vaadin-side-nav-item>
<vaadin-icon icon="vaadin:cog" slot="prefix"></vaadin-icon>
Admin
<vaadin-side-nav-item path="/users" slot="children">
<vaadin-icon icon="vaadin:group" slot="prefix"></vaadin-icon>
Users
</vaadin-side-nav-item>
<vaadin-side-nav-item path="/permissions" slot="children">
<vaadin-icon icon="vaadin:key" slot="prefix"></vaadin-icon>
Permissions
</vaadin-side-nav-item>
</vaadin-side-nav-item>
</vaadin-side-nav>Labelled Collapsible List
A label can be applied to the top of the navigation list. This can be useful for cases with multiple adjacent Side Navigation lists. A labeled Side Navigation list can be made collapsible.
new tab
<vaadin-vertical-layout theme="spacing">
<vaadin-side-nav style="width:100%">
<span slot="label">Messages</span>
<vaadin-side-nav-item path="/inbox">
<vaadin-icon icon="vaadin:inbox" slot="prefix"></vaadin-icon>
Inbox
</vaadin-side-nav-item>
<vaadin-side-nav-item path="/sent">
<vaadin-icon icon="vaadin:paperplane" slot="prefix"></vaadin-icon>
Sent
</vaadin-side-nav-item>
<vaadin-side-nav-item path="/trash">
<vaadin-icon icon="vaadin:trash" slot="prefix"></vaadin-icon>
Trash
</vaadin-side-nav-item>
</vaadin-side-nav>
<vaadin-side-nav collapsible style="width:100%">
<span slot="label">Admin</span>
<vaadin-side-nav-item path="/users">
<vaadin-icon icon="vaadin:group" slot="prefix"></vaadin-icon>
Users
</vaadin-side-nav-item>
<vaadin-side-nav-item path="/permissions">
<vaadin-icon icon="vaadin:key" slot="prefix"></vaadin-icon>
Permissions
</vaadin-side-nav-item>
</vaadin-side-nav>
</vaadin-vertical-layout>Scrolling
The Side Navigation component doesn’t contain a scroll area. Instead, it can be made scrollable by wrapping it inside a Scroller.
Keyboard Usage
| Shortcut | Function |
|---|---|
Tab | Navigation between list items. |
Tab | Navigation between link and expand/collapse button. |
Enter / Space | Toggles expand/collapse. |
Enter | Trigger link. |
Styling Individual Items
Individual navigation items can be styled by applying a CSS class name to them.
new tab
<vaadin-side-nav style="width:100%">
<vaadin-side-nav-item path="/dashboard">
<vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
Dashboard
</vaadin-side-nav-item>
<vaadin-side-nav-item path="/inbox">
<vaadin-icon icon="vaadin:envelope" slot="prefix"></vaadin-icon>
Inbox
</vaadin-side-nav-item>
<vaadin-side-nav-item path="https://vaadin.com" class="external">
<vaadin-icon icon="vaadin:vaadin-h" slot="prefix"></vaadin-icon>
Vaadin website
</vaadin-side-nav-item>
</vaadin-side-nav>10387B24-0DDF-4FC8-B5F9-B6319633D354