navbar.js

// Materialize
<NavBar
  brand=node
  children=node
  className=string
  left=bool
  right=bool
  fixed=bool
  options=object // options for the sidenav
/>

// Semantic-ui-react
// Utilize <Menu>
<Menu
  activeIndex=number|string
  attached=bool
  borderless=bool
  children=node
  className=string
  color=enum
  compact=bool  
  defaultActiveIndex=number
  fixed=enum // left|right|bottom|top
  foated=enum  
  fluid=bool
  inverted=bool 
  items=array
  onItemClick=func
/>

// Ant Design
// utilize <Menu>
<Menu
  theme=string // light|dark
  mode=string // vertical|horizontal|inline
  selectable=bool // allow selecting menu items
  selectedKeys=string[]  // array with keys of selected items
  defaultSelectedKeys=string[]
  openKeys=string[]
  defaultOpenKeys=string[]
  onOpenChange=func // called when open/close sub menu
  onSelect=func // called when selecting menu item
  onDeselect=func // opposite ^
  onClick=func // callback when menu item is clicked
  style=obj
/>
    
// Blueprint
// Roll own with Menu and css API

// React-bootstrap
<Nav
  activeHref=string // Marks the child NavItem with a matching href prop as active.
  activeKey=any // Marks the NavItem with matching eventKey as active
  bsClass=string // bass css class
  bsStyle=string // tabs|pills
  navbar=bool
  onSelect=func // callback for NavItem selected
  pullLeft=bool // float nav left
  poolRight=bool // float nav right  
/>

// Grommet
// utilize <Header> to combine <Title> && <Menu>
<Header
  fixed=bool
  float=bool
  size=string
  splash=bool 
>
  <Title />
  <Menu />
</Header>

// Lightning Design
// utilize <PageHeader> and roll own