Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Default NavPanel
  2. Dark NavPanel
  3. NavPanel Position
  4. Prop Table

NavPanel

import { NavPanel } from '@duik/it'
import NavPanel from '@duik/nav-panel'

NavPanel is a nav container to keep you navigation items. The simplest way to implement it in your UI is to use flex containers, which you can check here (Building Layout). Don't miss full example of how to build a navigation with nav elements here.

Default Nav Panel Style

<NavPanel>
  <NavLink>
    Nav Item
  </NavLink>
  <NavLink className="active">
    Active Nav Item
  </NavLink>
  <NavLink leftEl="🚝">
    With left el
  </NavLink>
  <NavLink leftEl={<Icon>love</Icon>} rightEl="3">
    With left and right el
  </NavLink>
</NavPanel>
ReactHTML Snippet
<NavPanel>
  <NavLink pill>
    Nav Item
  </NavLink>
  <NavLink className="active" pill>
    Active Nav Item
  </NavLink>
  <NavLink leftEl="🚝" pill>
    With left el
  </NavLink>
  <NavLink leftEl={<Icon>love</Icon>} pill rightEl="3">
    With left and right el
  </NavLink>
</NavPanel>
ReactHTML Snippet

Dark Style

<NavPanel dark>
  <NavLink>
    Nav Item
  </NavLink>
  <NavLink className="active">
    Active Nav Item
  </NavLink>
  <NavLink leftEl="🚝">
    With left el
  </NavLink>
  <NavLink leftEl={<Icon>love</Icon>} rightEl="3">
    With left and right el
  </NavLink>
</NavPanel>
ReactHTML Snippet
<NavPanel dark>
  <NavLink pill>
    Nav Item
  </NavLink>
  <NavLink className="active" pill>
    Active Nav Item
  </NavLink>
  <NavLink leftEl="🚝" pill>
    With left el
  </NavLink>
  <NavLink leftEl={<Icon>love</Icon>} pill rightEl="3">
    With left and right el
  </NavLink>
</NavPanel>
ReactHTML Snippet

On right

By default, border is rendered on the right side of the container. If you are placing nav panel on the left side, add "onRight" property to render the border on the left.

<NavPanel onRight>
  <NavLink>
    Nav Item
  </NavLink>
  <NavLink className="active" secondary>
    Active Nav Item
  </NavLink>
  <NavLink leftEl="🚝" secondary>
    With left el
  </NavLink>
  <NavLink leftEl={<Icon>love</Icon>} rightEl="3" secondary>
    With left and right el
  </NavLink>
</NavPanel>
ReactHTML Snippet

NavPanel Props

children

Required: false

type: React.ReactNode
className

Required: false

type: string
className, e.g. "my-custom-styling"
onRight | positionRight

Required: false

type: boolean
Renders border on the opposite side.
dark

Required: false

type: boolean
Applies dark styling.
...rest

Required: false

type: any
Other properties are passed down to the wrapping element