rad-nav

A navigation bar so rad you won't know what to do with all that spare time

Example

You can easily play with an example live on CodeSandbox

Features

• Mobile friendly
  • Renders into an app-like drawer system when active on smaller screens
• Simple styling
  • Exposes sane classes so you can style it like you would any normal elements
• Render arbitrary custom components
  • See custom rendering section for details

Setup

yarn add rad-nav

Using

import { RadNav } from 'rad-nav'
const menu = {
  label: "Root",
  items: [
    {
      label: "Sub Menu",
      items: [
        { label: "Normal item" }
      ]
    },
    { label: "Normal item #2" }
  ]
};
export const MyRadNavigationBar = <RadNav menu={menu} />

Custom Rendering

RadNav has a few props for providing functions that can be used to render your custom components instead of the stock ones.

• renderMobileMenu:
  • menu: Menu
  • select: Function(item | menu)
    • Note you'll need to manage your own state and only call select when you intend to select a leaf item or a current menu, not to visit a submenu.
  • renderHeader: Function(menu, select) => Header
  • renderItem: Function(menu, select, index) => Item
• renderDesktopDropdown:
  • menu: Menu
  • select: Function(item | menu)
    • Since Dropdowns are stateless, select is also to select a leaf item or root menu.
  • renderHeader: Function(menu, select) => Header
  • renderItem: Function(menu, select, index) => Item
• renderMobileHeader:
  • menu: Menu
  • select: Function(item | menu)
• renderDesktopHeader:
  • menu: Menu
  • select: Function(item | menu)
• renderMobileItem:
  • menu: Menu
  • select: Function(item | menu)
  • index: Number
• renderDesktopItem:
  • menu: Menu
  • select: Function(item | menu)
  • index: Number
• renderMobileClose:
  • menu: Menu
  • close: Function()
• renderMobileOpen:
  • menu: Menu
  • open: Function()

Styling

TODO