Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Full Light Example
  2. Full Dark Example

Building NavPanel

Building navigation (side) panels is a simple task, as the kit provides some handy components to make this work super easy. Nav panels come in light and dark mode, you can control this by simply adding "dark" prop to the NavPanel. See examples below or you can also discover the API for each component.

  1. NavPanel
  2. NavTitle
  3. NavSection
  4. NavSectionTitle
  5. NavLink

Light version

<NavPanel>
  <NavTitle>
    My Navigation
  </NavTitle>
  <NavSection>
    <NavSectionTitle>
      Default Link Styles
    </NavSectionTitle>
    <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>
  </NavSection>
  <NavSection>
    <NavSectionTitle>
      Pill Link Styles
    </NavSectionTitle>
    <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>
  </NavSection>
</NavPanel>
ReactHTML Snippet

Dark version

As you can see, the only difference is that we passed "dark" prop to the NavPanel component. Simple as that!

<NavPanel dark>
  <NavTitle>
    My Navigation
  </NavTitle>
  <NavSection>
    <NavSectionTitle>
      Default Link Styles
    </NavSectionTitle>
    <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>
  </NavSection>
  <NavSection>
    <NavSectionTitle>
      Pill Link Styles
    </NavSectionTitle>
    <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>
  </NavSection>
</NavPanel>
ReactHTML Snippet