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.
⚠️ 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: "#" } |