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

# Side Navigation Styling

## <a id="style-variants"></a>Style Variants

Side navigation supports the following style variants.

| Variant  | Description                                   | Supported by |
| -------- | --------------------------------------------- | ------------ |
| `filled` | Uses a solid background color for active item | Aura         |

## <a id="styling-individual-items"></a>Styling Individual Items

Individual navigation items can be styled by applying a CSS class name to them.

**Lit** — `side-nav-styling.ts`

```html
<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>
```

**Flow** — `SideNavStyling.java`

```java
SideNav nav = new SideNav();

SideNavItem dashboardLink = new SideNavItem("Dashboard",
        DashboardView.class, VaadinIcon.DASHBOARD.create());
SideNavItem inboxLink = new SideNavItem("Inbox", InboxView.class,
        VaadinIcon.ENVELOPE.create());
SideNavItem vaadinLink = new SideNavItem("Vaadin website",
        "https://vaadin.com", VaadinIcon.VAADIN_H.create());
vaadinLink.addClassName("external");

nav.addItem(dashboardLink, inboxLink, vaadinLink);
```

`nav-item-styling.css`

```css
/* Add this to your global CSS, for example in: */
/* src/main/resources/META-INF/resources/styles.css */

vaadin-side-nav-item.external::part(link) {
    color: deepskyblue;
}

vaadin-side-nav-item.external > vaadin-icon {
    color: deepskyblue;
}

vaadin-side-nav-item.external::part(link):hover {
    color: deepskyblue;
    text-decoration: underline;
}
```

**React** — `side-nav-styling.tsx`

```tsx
<SideNav style={{ width: '100%' }} ref={sideNavRef}>
  <SideNavItem path="/dashboard">
    <Icon icon="vaadin:dashboard" slot="prefix" />
    Dashboard
  </SideNavItem>
  <SideNavItem path="/inbox">
    <Icon icon="vaadin:envelope" slot="prefix" />
    Inbox
  </SideNavItem>
  <SideNavItem path="https://vaadin.com" className="external">
    <Icon icon="vaadin:vaadin-h" slot="prefix" />
    Vaadin website
  </SideNavItem>
</SideNav>
```

## <a id="style-properties"></a>Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the `html {…​}` selector. See [Component Style Properties](https://vaadin.com/docs/next/styling/styling-components.md#component-style-properties) for more information on style properties.

#### <a id="side-nav-properties"></a>Side Nav Properties

| Property                              | Supported by |
| ------------------------------------- | ------------ |
| `--vaadin-side-nav-child-indent`      | Aura, Lumo   |
| `--vaadin-side-nav-items-gap`         | Aura         |
| `--vaadin-side-nav-label-color`       | Aura         |
| `--vaadin-side-nav-label-font-size`   | Aura         |
| `--vaadin-side-nav-label-font-weight` | Aura         |
| `--vaadin-side-nav-label-line-height` | Aura         |

#### <a id="side-nav-item-properties"></a>Side Nav Item Properties

| Property                               | Supported by |
| -------------------------------------- | ------------ |
| `--vaadin-side-nav-item-background`    | Aura         |
| `--vaadin-side-nav-item-border-color`  | Aura         |
| `--vaadin-side-nav-item-border-radius` | Aura         |
| `--vaadin-side-nav-item-border-width`  | Aura         |
| `--vaadin-side-nav-item-font-size`     | Aura         |
| `--vaadin-side-nav-item-font-weight`   | Aura         |
| `--vaadin-side-nav-item-line-height`   | Aura         |
| `--vaadin-side-nav-item-gap`           | Aura         |
| `--vaadin-side-nav-item-padding`       | Aura         |
| `--vaadin-side-nav-item-text-color`    | Aura         |

## <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/next/styling.md) for more details on how to style components.

> **Important: Not for Shadow DOM**
>
> These selectors should be used in `styles.css` or another stylesheet loaded with the `@StyleSheet` annotation or the `@import` CSS rule. **They do not work in the shadow DOM of Vaadin components**, such as in stylesheets in the `components` sub-folder or loaded with the `@CssImport` annotation’s `themeFor` property.

---

- 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]`

- Focused label

  `vaadin-side-nav[focused]`

- Keyboard focused label

  `vaadin-side-nav[focus-ring]`

## <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 with tooltip

  `vaadin-side-nav-item[has-tooltip]`

- 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"]`