@asphalt-react/appbar

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:

1. Navigation: Contains all the links for navigation. Links can be added using NavItem component.
2. Header: Application logo can be added using the logo prop.
3. 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.

⚠️ The NavItem component is different from the one in @asphalt-react/sidebar

Props

children

Caption for the link

type	required	default
string	true	N/A

active

Adds styles for active link

type	required	default
bool	false	N/A

as

Element to be rendered for the link

type	required	default
elementType	false	"a"

tagProps

props for the link element

type	required	default
object	false	{ href: "#" }