Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Default NavLink style
  2. Pill Style
  3. Secondary Nav Items
  4. Compose with other components
  5. Prop Table

NavLink

import { NavLink } from '@duik/it'
import NavLink from '@duik/nav-link'

Single component that will provide you several different styles of rendering. For a full example, see how to build Navigation Panel. Same as Buttons, you can compose the component with different base, e.g. Link from react-router-dom

Default nav link 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

Pill style

<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

Secondary (nested) Link

<NavPanel>
  <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

With Link from react-router-dom

Same as Buttons, you can pass Component property to NavLink if you want to render for example Link from react-router-dom.

import { Link } from 'react-router-dom'
          
<NavPanel>
  <NavLink Component={Link} to="#">
    Nav Item
  </NavLink>
</NavPanel>
ReactHTML Snippet

NavLink Props

children

Required: false

type: React.ReactNode
className

Required: false

type: string
className, e.g. "my-custom-styling"
pill

Required: false

type: boolean
Renders with pill style
secondary

Required: false

type: boolean
Renders with secondary styling
highlighted

Required: false

type: boolean
Increases the font weight
Component

Required: false

type: React.FunctionalComponent | JSX Element

default value: "a"

Renders the component with a given react element. By default, the component renders <a />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
leftEl

Required: false

type: React.ReactNode
Left element to render, e.g. an icon
rightEl

Required: false

type: React.ReactNode
Right element to render, e.g. number of items
...rest

Required: false

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