Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. With Section
  2. Without Section
  3. Prop Table

NavSection

import { NavSection } from '@duik/it'
import NavSection from '@duik/nav-section'

NavSection adds some extra whitespacing to add some visual order to your coded application. It is a simple div with some css properties. Don't miss full example of how to build a navigation with nav elements here.

With NavSection

<NavPanel dark>
  <NavSection>
    <NavSectionTitle>
      Section title 1
    </NavSectionTitle>
    <NavLink>
      Item 1
    </NavLink>
    <NavLink>
      Item 2
    </NavLink>
  </NavSection>
  <NavSection>
    <NavSectionTitle>
      Section title 2
    </NavSectionTitle>
    <NavLink>
      Item 1
    </NavLink>
    <NavLink>
      Item 2
    </NavLink>
  </NavSection>
</NavPanel>
ReactHTML Snippet

Without NavSection

<NavPanel dark>
  <NavSectionTitle>
    Section title 1
  </NavSectionTitle>
  <NavLink>
    Item 1
  </NavLink>
  <NavLink>
    Item 2
  </NavLink>
  <NavSectionTitle>
    Section title 2
  </NavSectionTitle>
  <NavLink>
    Item 1
  </NavLink>
  <NavLink>
    Item 2
  </NavLink>
</NavPanel>
ReactHTML Snippet

Prop table

Any props you would pass to div.