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.
- Root element
-
vaadin-side-nav
Parts
- Header (above list)
-
vaadin-side-nav
::part(label) - Label
-
vaadin-side-nav
> [slot="label"] - Expand/collapse icon
-
vaadin-side-nav
::part(label)::after
Navigation Item
- Root element
-
vaadin-side-nav-item
- Active (current view)
-
vaadin-side-nav-item
[active] - Item content (sans children)
-
vaadin-side-nav-item
::part(item) - Item label
-
vaadin-side-nav-item
> :not(slot) - Link item
-
vaadin-side-nav-item
[path] - Non-link item
-
vaadin-side-nav-item
:not([path]) - Item prefix element
-
vaadin-side-nav-item
> [slot="prefix"] - Item suffix element
-
vaadin-side-nav-item
> [slot="suffix"]