Playbook Design System

Default

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const DefaultNav = (props) => (
  <Nav
      link="#"
      orientation="vertical"
      title="Menu"
      {...props}
  >
    <NavItem
        link="#"
        text="Photos"
        {...props}
    />
    <NavItem
        link="#"
        text="Music"
        {...props}
    />
    <NavItem
        active
        link="#"
        text="Video"
        {...props}
    />
    <NavItem
        link="#"
        text="Files"
        {...props}
    />
  </Nav>
)

export default DefaultNav

With Icons

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const WithIconsNav = (props) => {
  return (
    <Nav
        link="#"
        title="Browse"
        {...props}
    >
      <NavItem
          iconLeft="newspaper"
          text="News Feed"
          {...props}
      />
      <NavItem
          active
          iconLeft="comments-alt"
          link="#"
          text="Messages"
          {...props}
      />
      <NavItem
          iconLeft="calendar-check"
          iconRight="angle-down"
          link="#"
          text="Events"
          {...props}
      />
      <NavItem
          iconLeft="users"
          link="#"
          text="Friends"
          {...props}
      />
      <NavItem
          iconLeft="users-class"
          iconRight="angle-down"
          link="#"
          text="Groups"
          {...props}
      />
    </Nav>
  )
}

export default WithIconsNav

With Custom Icon

Icon used needs to be square. Icon size is 24px by 24px.

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const WithImageNav = (props) => {
  return (
    <Nav
        link="#"
        title="Browse"
        {...props}
    >
      <NavItem
          imageUrl="https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png"
          text="News Feed"
          {...props}
      />
      <NavItem
          active
          imageUrl="https://p7.hiclipart.com/preview/928/339/723/messages-iphone-apple-imessage-iphone-thumbnail.jpg"
          link="#"
          text="Messages"
          {...props}
      />
      <NavItem
          iconRight="angle-down"
          imageUrl="https://www.clipartmax.com/png/middle/103-1038653_circle-icons-calendar-svg-event-icon.png"
          link="#"
          text="Events"
          {...props}
      />
      <NavItem
          imageUrl="https://www.pngitem.com/pimgs/m/228-2289227_find-friends-icon-png-image-iphone-find-my.png"
          link="#"
          text="Friends"
          {...props}
      />
      <NavItem
          iconRight="angle-down"
          imageUrl="https://img.favpng.com/18/5/20/blue-human-behavior-silhouette-area-communication-png-favpng-wLT3QYknSwc68uu9GAUHGS5FY_t.jpg"
          link="#"
          text="Groups"
          {...props}
      />
    </Nav>
  )
}

export default WithImageNav

No Highlight

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const NoHighlightNav = (props) => {
  return (
    <Nav highlight={false}>
      <NavItem
          active
          link="#"
          text="All Categories"
          {...props}
      />
      <NavItem
          link="#"
          text="Food"
          {...props}
      />
      <NavItem
          link="#"
          text="Digital"
          {...props}
      />
      <NavItem
          link="#"
          text="Design Art"
          {...props}
      />
    </Nav>
  )
}

export default NoHighlightNav

No Borders

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const BorderlessNav = (props) => {
  return (
    <Nav borderless>
      <NavItem
          active
          link="#"
          text="All Categories"
          {...props}
      />
      <NavItem
          link="#"
          text="Food"
          {...props}
      />
      <NavItem
          link="#"
          text="Digital"
          {...props}
      />
      <NavItem
          link="#"
          text="Design Art"
          {...props}
      />
    </Nav>
  )
}

export default BorderlessNav

Subtle Variant

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const SubtleNav = (props) => {
  return (
    <Nav variant="subtle">
      <NavItem
          link="#"
          text="Overview"
          {...props}
      />
      <NavItem
          active
          link="#"
          text="Albums"
          {...props}
      />
      <NavItem
          link="#"
          text="Similar Artists"
          {...props}
      />
      <NavItem
          link="#"
          text="Events"
          {...props}
      />
      <NavItem
          link="#"
          text="Discography"
          {...props}
      />
      <NavItem
          link="#"
          text="Listeners"
          {...props}
      />
    </Nav>
  )
}

export default SubtleNav

Subtle With Icons

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const SubtleWithIconsNav = (props) => {
  return (
    <Nav variant="subtle">
      <NavItem
          iconLeft="city"
          link="#"
          text="City"
          {...props}
      />
      <NavItem
          iconLeft="user-friends"
          iconRight="angle-down"
          link="#"
          text="People"
          {...props}
      />
      <NavItem
          active
          iconLeft="user-tie"
          link="#"
          text="Business"
          {...props}
      />
      <NavItem
          iconLeft="theater-masks"
          link="#"
          text="Entertainment"
          {...props}
      />
      <NavItem
          iconLeft="salad"
          iconRight="angle-down"
          link="#"
          text="Food"
          {...props}
      />
      <NavItem
          iconLeft="sunglasses"
          link="#"
          text="Style"
          {...props}
      />
      <NavItem
          iconLeft="child"
          link="#"
          text="Childern"
          {...props}
      />
    </Nav>
  )
}

export default SubtleWithIconsNav

Subtle No Highlight

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const SubtleNoHighlightNav = (props) => {
  return (
    <Nav
        highlight={false}
        variant="subtle"
        {...props}
    >
      <NavItem
          link="#"
          text="Dashboard"
          {...props}
      />
      <NavItem
          active
          link="#"
          text="Statistics"
          {...props}
      />
      <NavItem
          link="#"
          text="Pages"
          {...props}
      />
    </Nav>
  )
}

export default SubtleNoHighlightNav

Bold Variant

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const BoldVerticalNav = (props) => {
  return (
    <Nav
        link="#"
        orientation="vertical"
        variant="bold"
        {...props}
    >
      <NavItem
          link="#"
          text="About"
          {...props}
      />
      <NavItem
          active
          link="#"
          text="Case Studies"
          {...props}
      />
      <NavItem
          link="#"
          text="Service"
          {...props}
      />
      <NavItem
          link="#"
          text="Contacts"
          {...props}
      />
    </Nav>
  )
}

export default BoldVerticalNav

Horizontal Nav

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const HorizontalNav = (props) => {
  return (
    <Nav
        link="#"
        orientation="horizontal"
        {...props}
    >
      <NavItem
          link="#"
          text="About"
          {...props}
      />
      <NavItem
          active
          link="#"
          text="Case Studies"
          {...props}
      />
      <NavItem
          link="#"
          text="Service"
          {...props}
      />
      <NavItem
          link="#"
          text="Contacts"
          {...props}
      />
    </Nav>
  )
}

export default HorizontalNav

Subtle Horizontal Nav

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const SubtleHorizontalNav = (props) => {
  return (
    <Nav
        link="#"
        orientation="horizontal"
        variant="subtle"
        {...props}
    >
      <NavItem
          link="#"
          text="About"
          {...props}
      />
      <NavItem
          active
          link="#"
          text="Case Studies"
          {...props}
      />
      <NavItem
          link="#"
          text="Service"
          {...props}
      />
      <NavItem
          link="#"
          text="Contacts"
          {...props}
      />
    </Nav>
  )
}

export default SubtleHorizontalNav

Bold Horizontal Nav

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const BoldHorizontalNav = (props) => {
  return (
    <Nav
        link="#"
        orientation="horizontal"
        variant="bold"
        {...props}
    >
      <NavItem
          link="#"
          text="About"
          {...props}
      />
      <NavItem
          active
          link="#"
          text="Case Studies"
          {...props}
      />
      <NavItem
          link="#"
          text="Service"
          {...props}
      />
      <NavItem
          link="#"
          text="Contacts"
          {...props}
      />
    </Nav>
  )
}

export default BoldHorizontalNav

Block

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'
import User from '../../pb_user/_user'

const BlockNav = (props) => {
  return (
    <Nav
        link="#"
        title="Users"
        {...props}
    >
      <NavItem
          active
          link="#"
          {...props}
      >
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="horizontal"
            territory="PHL"
            title="Remodeling Consultant"
            {...props}
        />
      </NavItem>
      <NavItem link="#">
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/45.jpg"
            name="Julie Hamilton"
            orientation="horizontal"
            territory="PHL"
            title="Inside Sales Agent"
            {...props}
        />
      </NavItem>
      <NavItem link="#">
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/men/44.jpg"
            name="Dennis Wilks"
            orientation="horizontal"
            territory="PHL"
            title="Senior Remodeling Consultant"
            {...props}
        />
      </NavItem>
      <NavItem link="#">
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/men/46.jpg"
            name="Ronnie Martin"
            orientation="horizontal"
            territory="PHL"
            title="Customer Development Representative"
            {...props}
        />
      </NavItem>
    </Nav>
  )
}

export default BlockNav

Without Title

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const BlockNoTitleNav = (props) => {
  return (
    <Nav>
      <NavItem
          iconLeft="newspaper"
          link="#"
          text="News Feed"
          {...props}
      />
      <NavItem
          active
          iconLeft="comments-alt"
          link="#"
          text="Messages"
          {...props}
      />
      <NavItem
          iconLeft="calendar-check"
          iconRight="angle-down"
          link="#"
          text="Events"
          {...props}
      />
      <NavItem
          iconLeft="calendar-check"
          iconRight="angle-down"
          link="#"
          text="Events"
          {...props}
      />
      <NavItem
          iconLeft="users-class"
          iconRight="angle-down"
          link="#"
          text="Groups"
          {...props}
      />
    </Nav>
  )
}

export default BlockNoTitleNav

Open in a New Tab

Code Example

Close

import React from 'react'

import Nav from '../_nav'
import NavItem from '../_item'

const NewTab = (props) => (
  <Nav
      link="#"
      orientation="vertical"
      title="Popular Websites"
      {...props}
  >
    <NavItem
        link="https://www.google.com/"
        target="_blank"
        text="Google"
        {...props}
    />
    <NavItem
        link="https://www.youtube.com/"
        target="_blank"
        text="YouTube"
        {...props}
    />
    <NavItem
        link="https://www.facebook.com/"
        target="_blank"
        text="Facebook"
        {...props}
    />
    <NavItem
        link="https://www.amazon.com/"
        target="_blank"
        text="Amazon"
        {...props}
    />
  </Nav>
)

export default NewTab

Nav

See this kit in action in our sample UI

UI Samples using Nav Kit

Analytics Dashboard

News Magazine

Trending Repositories

Crowdsourced Posts