nente# Install

```shell
npm i @mate-react/side-nav
```

# Import

```tsx
import { MateSideNav, MateSideNavItem } from '@mate-react/side-nav';
```

# Variants

## Default

```tsx
<MateSideNav>
  <MateSideNavItem path="/home">Home</MateSideNavItem>
  <MateSideNavItem path="/about">About</MateSideNavItem>
  <MateSideNavItem path="/contact">Contact</MateSideNavItem>
</MateSideNav>
```

## With Icons

```tsx
<MateSideNav>
  <MateSideNavItem path="/home">
    <span slot="prefix" theme="icon">home</span>
    Home
  </MateSideNavItem>
  <MateSideNavItem path="/settings">
    <span slot="prefix" theme="icon">settings</span>
    Settings
  </MateSideNavItem>
</MateSideNav>
```

## With Children

```tsx
<MateSideNav>
  <MateSideNavItem>
    <span>Section</span>
    <MateSideNavItem path="/item-1">Item 1</MateSideNavItem>
    <MateSideNavItem path="/item-2">Item 2</MateSideNavItem>
  </MateSideNavItem>
</MateSideNav>