> Markdown version of [Styling](https://vaadin.com/docs/v24/components/side-nav/styling). Section index: [llms.txt](https://vaadin.com/docs/v24/components/llms.txt)

# Styling

## <a id="css-selectors"></a>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](https://vaadin.com/docs/v24/styling.md) for more details on how to style components.

- Root element

  `vaadin-side-nav`

## <a id="parts"></a>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`

## <a id="states"></a>States

- Collapsible list

  `vaadin-side-nav[collapsible]`

- Collapsed list

  `vaadin-side-nav[collapsed]`

## <a id="navigation-item"></a>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`

### <a id="parent-and-child-items"></a>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"]`