Dashboard UI Kit

Apps PreviewDownload Design Package

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

false

type: React.ReactNode
className

false

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

false

type: boolean
Renders with pill style
secondary

false

type: boolean
Renders with secondary styling
highlighted

false

type: boolean
Increases the font weight
Component

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

false

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

false

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

false

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