@seragam-ui/vertical-navigation v0.3.1

@seragam-ui/vertical-navigation

A Quick description of the component

Installation

yarn add @seragam-ui/vertical-navigation
# or
npm i @seragam-ui/vertical-navigation

How to use

Sample Navigation Data

import { Icon } from '@seragam-ui/icon'

const navigation = [
  { label: 'Dashboard', icon: <Icon>home</Icon>, isActive: false, href: '#' },
  {
    label: 'Team',
    icon: <Icon>person</Icon>,
    isActive: true,
    children: [
      { label: 'Overview', href: '#', isActive: true },
      { label: 'Members', href: '#', isActive: false },
      { label: 'Calendar', href: '#', isActive: false },
      { label: 'Settings', href: '#', isActive: false },
    ],
  },
  {
    label: 'Projects',
    icon: <Icon>folder</Icon>,
    isActive: false,
    children: [
      { label: 'Overview', href: '#', isActive: false },
      { label: 'Members', href: '#', isActive: false },
      { label: 'Calendar', href: '#', isActive: false },
      { label: 'Settings', href: '#', isActive: false },
    ],
  },
]

Component Usage

import Link from 'next/link'
import { VerticalNavigation } from '@seragam-ui/vertical-navigation'

const App = () => {
  return (
    <div
      style={{
        width: 320,
        height: '100vh',
        background: '#103178',
        padding: '1rem',
      }}
    >
      <VerticalNavigation items={navigation} customLink={Link} inverse />
    </div>
  )
}