# Install

```shell
npm i @mate-vue/side-nav@${version.mate.vue}
```

# Import

```vue
<script setup>
import { MateSideNav, MateSideNavItem } from '@mate-vue/side-nav';
</script>
```

# Variants

## Default

```vue
<template>
  <MateSideNav label="Navigation">
    <MateSideNavItem path="/home">Startseite</MateSideNavItem>
    <MateSideNavItem>
      Berichte
      <MateSideNavItem slot="children" path="/reports/monthly">Monatsberichte</MateSideNavItem>
      <MateSideNavItem slot="children" path="/reports/yearly">Jahresberichte</MateSideNavItem>
    </MateSideNavItem>
    <MateSideNavItem path="/settings">Einstellungen</MateSideNavItem>
  </MateSideNav>
</template>
```