@density/ui-navbar

Navigation Bar component

Stats

StarsIssuesVersionUpdatedCreatedSize
@density/ui-navbar
3.0.33 years ago4 years agoMinified + gzip package size for @density/ui-navbar in KB

Readme

Navbar

The navbar is a navigation element that lives on the top of the screen.

Mobile usage

The navbar has a prop that can be passed to it called mobileSidebar - this prop expects a function that returns a list of NavbarMobileItem components. Here's an example:

<Navbar mobileSidebar={(closeSidebar, openSidebar) => [
  {/* Mobile navbar items: */}
  <NavbarMobileItem />,
  <NavbarMobileItem />,
  <NavbarMobileItem />,
]}>
  {/* Normal navbar items: */}
  <NavbarItem />
  <NavbarItem />
  <NavbarItem />
</Navbar>

Also, two callbacks are passed to the mobileSidebar function: one to open the sidebar and one to close the sidebar. Here's one in action:

<Navbar mobileSidebar={(closeSidebar, openSidebar) => [
  {/* When the user clicks the first item in the sidebar, close the sidebar. */}
  <NavbarMobileItem onClick={closeSidebar} />,
  <NavbarMobileItem />,
  <NavbarMobileItem />,
]}>
  {/* Normal navbar items: */}
  <NavbarItem />
  <NavbarItem />
  <NavbarItem />
</Navbar>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.