Playbook Design System

Default

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default DefaultNav

With Icons

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default WithIconsNav

With Custom Icon

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

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default WithImageNav

No Highlight

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default NoHighlightNav

No Borders

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default BorderlessNav

Subtle Variant

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default SubtleNav

Subtle With Icons

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default SubtleWithIconsNav

Subtle No Highlight

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default SubtleNoHighlightNav

Bold Variant

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default BoldVerticalNav

Nav with Spacing Control

All Nav variants' navItems accept our global Spacing (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

const NavWithSpacingControl = (props) => {
  return (
    <Nav
        link="#"
        orientation="vertical"
        variant="bold"
    >
      <NavItem
          link="#"
          margin="none"
          paddingY="xxs"
          text="About"
      />
      <NavItem
          active
          link="#"
          margin="none"
          paddingY="xxs"
          text="Case Studies"
      />
      <NavItem
          link="#"
          margin="none"
          paddingY="xxs"
          text="Service"
      />
      <NavItem
          link="#"
          margin="none"
          paddingY="xxs"
          text="Contacts"
      />
    </Nav>
  )
}

export default NavWithSpacingControl

Nav With Font Control

All Nav variants' navItems accept the following props for customizing font:

fontSize / font_size defaults to normal, also accepts small
fontWeight / font_weight defaults to regular, also accepts bold and bolder

import React from "react";
import { Nav, NavItem } from 'playbook-ui'

const NavWithFontControl = (props) => {
  return (
    <Nav
        link="#"
        orientation="vertical"
        variant="bold"
    >
        <NavItem
            fontSize="small"
            fontWeight="bolder"            
            link="#"
            text="About"
        />
        <NavItem
            active
            fontSize="small"
            fontWeight="bolder" 
            link="#"
            text="Case Studies"
        />
        <NavItem
            fontSize="small"
            fontWeight="bolder" 
            link="#"
            text="Service"
        />
        <NavItem
            fontSize="small"
            fontWeight="bolder" 
            link="#"
            text="Contacts"
        />
    </Nav>

  );
};

export default NavWithFontControl;

Collapsible Nav

The collapsible prop allows users to create a nested, collapsible nav. Pass collapsible to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.

The optional collapsed prop can also be used to set the default state for the collapsed nav on first render of the page. collapsed takes a boolean value that is set to true (meaning nav is collapsed) by default. Set it to false as shown here to have the nav open on first render.

import React from "react";
import { Nav, NavItem } from 'playbook-ui'

const CollapsibleNav = (props) => {
  return (
    <Nav 
        variant="bold"
    >
      <NavItem
          active
          collapsed={false}
          collapsible 
          iconLeft="city" 
          link="#" 
          text="Overview"
      >
        <NavItem
            link="#" 
            text="City"
        />
        <NavItem
            link="#"
            text="People"
        />
        <NavItem 
            link="#" 
            text="Business"
        />
      </NavItem>
      <NavItem 
          collapsible 
          iconLeft="theater-masks"
          link="#" 
          text="Albums"
      >
        <NavItem 
            link="#" 
            text="Entertainment"
        />
        <NavItem 
            link="#" 
            text="Food"
        />
        <NavItem 
            link="#" 
            text="Style"
        />
      </NavItem>
      <NavItem 
          collapsible 
          iconLeft="city" 
          link="#" 
          text="Similar Artists"
      >
        <NavItem 
            link="#" 
            text="City"
        />
        <NavItem
            link="#"
            text="People"
        />
        <NavItem 
            link="#" 
            text="Business"
        />
      </NavItem>
    </Nav>
  );
};

export default CollapsibleNav

Collapsible Nav With Options

Collapsible Navs optionally accept the following props:

collapsibleTrail / collapsible_trail, enables a vertical guideline to the left of the collapsible nav's children
iconRight optionally accepts an array of 2 icon values; the first is used as the default icon when the node is collapsed, the second is toggled when the node is expanded. If only 1 icon value is passed, the icon will not toggle between collapsible states.

import React from "react"
import { Nav, NavItem } from "playbook-ui"

const CollapsibleNavWithAllOptions = (props) => {
  const navItems = ["Overview", "Albums", "Similar Artists"]

  return (
    <>
      <Nav 
          variant="bold"
      >
        {navItems.map((text, index) => {
          return (
            <NavItem
                collapsible
                collapsibleTrail
                fontWeight="bolder"
                iconLeft="city"
                iconRight={["plus", "minus"]}
                key={index}
                link="#"
                text={text}
            >
              <NavItem 
                  fontSize="small"
                  link="#" 
                  marginY="none"
                  text="City"
              />
              <NavItem 
                  fontSize="small"
                  link="#" 
                  marginY="none"
                  text="People"
              />
              <NavItem
                  fontSize="small"
                  link="#" 
                  marginY="none"
                  text="Business"
              />
            </NavItem>
          );
        })}
      </Nav>
    </>
  )
}

export default CollapsibleNavWithAllOptions

Collapsible Nav With ItemSpacing

The itemSpacing prop can optionally be applied to the Nav parent element and accepts an object through which any of our Spacing (padding, margin) global prop values can be passed as an object. All spacing values passed to itemSpacing will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with itenSpacing on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing itemSpacing value.

import React from "react";
import { Nav, NavItem } from 'playbook-ui'

const CollapsibleNavItemSpacing = (props) => {
  return (
    <Nav 
        itemSpacing={{padding: "xs", marginY: "none"}}
        variant="bold"
    >
      <NavItem
          active
          collapsible 
          iconLeft="city" 
          link="#" 
          text="Overview"
      >
        <NavItem
            link="#" 
            paddingY="none"
            text="City"
        />
        <NavItem
            link="#"
            paddingY="none"
            text="People"
        />
        <NavItem 
            link="#" 
            paddingY="none"
            text="Business"
        />
      </NavItem>
      <NavItem 
          collapsible 
          iconLeft="theater-masks"
          link="#" 
          text="Albums"
      >
        <NavItem 
            link="#" 
            paddingY="none"
            text="Entertainment"
        />
        <NavItem 
            link="#" 
            paddingY="none"
            text="Food"
        />
        <NavItem 
            link="#" 
            paddingY="none"
            text="Style"
        />
      </NavItem>
      <NavItem 
          collapsible 
          iconLeft="city" 
          link="#" 
          text="Similar Artists"
      >
        <NavItem 
            link="#" 
            paddingY="none"
            text="City"
        />
        <NavItem
            link="#"
            paddingY="none"
            text="People"
        />
        <NavItem 
            link="#" 
            paddingY="none"
            text="Business"
        />
      </NavItem>
    </Nav>
  );
};

export default CollapsibleNavItemSpacing

Collapsible Nav With Custom Toggling

The collapsible nav kit uses our Collapsible kit under the hood and as such the useCollapsible hook can be used to achieve custom toggling of the collapsible nav. To do this, you must import and declare the useCollapsible hook and pass it's state to the collapsed prop. See our code example below to see how this can be done.

import React from "react"
import { Nav, NavItem, useCollapsible } from "playbook-ui"

const CollapsibleNavCustom = (props) => {
  const navItems = ["Overview", "Albums", "Similar Artists"]
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const collapsibles = navItems.map(() => useCollapsible(true))

  const handleMainClick = (index) => {
    collapsibles.forEach(([, , setCollapsed], idx) => {
      if (idx === index) {
        setCollapsed(false)
      } else {
        setCollapsed(true)
      }
    })
  }

  return (
    <>
      <Nav 
          variant="bold"
      >
        {navItems.map((text, index) => {
          const [collapsed] = collapsibles[index]
          return (
            <NavItem
                collapsed={collapsed}
                collapsible
                collapsibleTrail
                fontSize="small"
                fontWeight="bolder"
                iconLeft="chevron-down"
                iconRight={["plus", "minus"]}
                id={`collapsible-nav-item-${index + 1}`}
                key={index}
                link="#"
                onClick={() => handleMainClick(index)}
                text={text}
            >
              <NavItem link="#" 
                  text="City"
              />
              <NavItem link="#" 
                  text="People"
              />
              <NavItem link="#" 
                  text="Business"
              />
            </NavItem>
          );
        })}
      </Nav>
    </>
  )
}

export default CollapsibleNavCustom

Collapsible Nav No Icon

Optionally remove the expand/collapse icon(s) from any collapsible nav item by passing "none" to the iconRight prop on that nav item.

import React from "react";
import { Nav, NavItem } from 'playbook-ui'

const CollapsibleNavNoIcon = (props) => {
  return (
    <Nav 
        variant="bold"
    >
      <NavItem
          active
          collapsed={false}
          collapsible 
          iconLeft="city" 
          iconRight="none"
          link="#" 
          text="Overview"
      >
        <NavItem
            link="#" 
            text="City"
        />
        <NavItem
            link="#"
            text="People"
        />
        <NavItem 
            link="#" 
            text="Business"
        />
      </NavItem>
      <NavItem 
          collapsible 
          iconLeft="theater-masks"
          iconRight="none"
          link="#" 
          text="Albums"
      >
        <NavItem 
            link="#" 
            text="Entertainment"
        />
        <NavItem 
            link="#" 
            text="Food"
        />
        <NavItem 
            link="#" 
            text="Style"
        />
      </NavItem>
      <NavItem 
          collapsible 
          iconLeft="city" 
          iconRight="none"
          link="#" 
          text="Similar Artists"
      >
        <NavItem 
            link="#" 
            text="City"
        />
        <NavItem
            link="#"
            text="People"
        />
        <NavItem 
            link="#" 
            text="Business"
        />
      </NavItem>
    </Nav>
  );
};

export default CollapsibleNavNoIcon

Horizontal Nav

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default HorizontalNav

Subtle Horizontal Nav

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default SubtleHorizontalNav

Bold Horizontal Nav

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default BoldHorizontalNav

Block

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'
import User from 'playbook-ui'

const BlockNav = (props) => {
  return (
    <Nav
        link="#"
        title="Users"
    >
      <NavItem
          active
          link="#"
      >
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="horizontal"
            territory="PHL"
            title="Remodeling Consultant"
        />
      </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"
        />
      </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"
        />
      </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"
        />
      </NavItem>
    </Nav>
  )
}

export default BlockNav

Without Title

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

export default BlockNoTitleNav

Open in a New Tab

import React from 'react'

import Nav from 'playbook-ui'
import NavItem from 'playbook-ui'

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

Available Props

Contribute to Playbook

Power

Connect