Side Navigation
Styling API reference for the Side Nav component.
- Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.
- Root element
-
vaadin-side-nav
Parts
- Header (above list)
-
vaadin-side-nav::part(label) - Label
-
vaadin-side-nav> [slot="label"] - Expand/collapse toggle
-
vaadin-side-nav::part(toggle-button) - Expand/collapse icon
-
vaadin-side-nav::part(toggle-button)::before
Navigation Item
- Item root element
-
vaadin-side-nav-item - Current view/page item
-
vaadin-side-nav-item[current] - Item with link
-
vaadin-side-nav-item[path] - Item without link
-
vaadin-side-nav-item:not([path]) - Item contents (excl. children)
-
vaadin-side-nav-item::part(content) - Link label (incl. prefix/suffix)
-
vaadin-side-nav-item::part(link) - Item prefix element
-
vaadin-side-nav-item> [slot="prefix"] - Item suffix element
-
vaadin-side-nav-item> [slot="suffix"] - Item icon
-
vaadin-side-nav-item> vaadin-icon