The nav is a grouped set of links that take the user to another page, or tab through parts of a page. It comes in horizontal or vertical with several different variants.
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
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
Icon used needs to be square. Icon size is 24px by 24px.
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
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
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
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
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
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
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
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
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
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
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
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
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