@asphalt-react/appbar NPM

Appbar

Appbar component is the main navigation bar for the whole application. Use this component at the root of your application as the top navigation bar. It is contructed using 3 sections:

Navigation: Contains all the links for navigation. Links can be added using NavItem component.
Header: Application logo can be added using the logo prop.
Footer: Avatar can be used here for user profile and ActionList to add some extra actions. They can be passed using footer prop.

The styles required for the Appbar to stick to the top of the screen needs to be added while implementation.

Responsive

Appbar is completely responsive. All the navigation links switch to a collapsible screen (navigation drawer) and a hamburger button is added to interact with the drawer.

Usage

<Appbar>
  <NavItem tagProps={{ href: "/" }}>Home</NavItem>
  <NavItem tagProps={{ href: "/profile" }}>Profile</NavItem>
</Appbar>

Props

children

NavItems for Appbar

type	required	default
node	false	N/A

logo

React node for the logo.

<Appbar logo={<Logo />}

type	required	default
node	false	N/A

footer

React node for the footer section. Avatar, Actionlist, etc can be added here

type	required	default
node	false	N/A

NavItem

Using NavItem component, links can be added to the Appbar. By default, it renders an <a> tag but you can pass your custom element or React component using as prop. All the props related to the link should be passed in tagProps element.