Documentation

Documentation

Side Navigation

Source: TypeScript / Java
Styling API reference for the Side Nav component.

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

States

Collapsible list

vaadin-side-nav[collapsible]

Collapsed list

vaadin-side-nav[collapsed]

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

Parent and Child Items

Expand/collapse toggle

vaadin-side-nav-item::part(toggle-button)

Expand/collapse toggle icon

vaadin-side-nav-item::part(toggle-button)::before

Expanded item

vaadin-side-nav-item[expanded]

Child item

vaadin-side-nav-item[slot="children"]