Version:

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>