# Appbar
[](https://badge.fury.io/js/@asphalt-react%2Fappbar)
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 contains a list of links that can either take the user to another page or to another section on the same page. Appbar is responsive and adapts to small, medium & large screens. You can also create a custom Appbar through a family of unit components exported by Appbar.
## Usage
```jsx
import { Appbar, Nav, NavItem, NavLink } from "@asphalt-react/appbar"
function App () {
return (
);
}
export default App;
```
## Anatomy
Appbar has 3 sections:
1. **Head**: Add items in the head section such as Logo using the `head` prop.
2. **Body**: Contains the list of items for navigation. This is the children.
3. **Tail**: Add items in the tail section such as user Avatar or logout button using the `tail` prop.
The styles required for the Appbar to stick to the top of the screen needs to be added while implementation.
## Navigation items
Appbar exports a family of unit components to create the nav items:
1. Nav
2. NavItem
3. NavLink
4. NavItemCaption
5. NavItemIcon
6. NavItemAction
Using these components, you can compose a variety of nav items.
## Screen size adaptability
Appbar adapts to smaller screens (below 600px). The Appbar renders at the top of its container with the head and tail section visible. The body section is hidden under a hamburger button that appears in the head section.
Activating the hamburger button shows the hidden sections in a container (or drawer) that covers the complete screen. The hamburger button is replaced by a cross button to close the drawer. Appbar also exposes a `close()` function that to close the drawer. It can be useful if you want to close the drawer on selecting a nav item. For example:
```jsx
import { Appbar, Nav, NavItem, NavLink } from "@asphalt-react/appbar"
function App () {
const close = () => Appbar.close
return (
)
}
```
### Accessibility
1. Appbar accepts Esc to close the drawer.
2. Appbar also traps focus in the drawer. Press Tab or Shift + Tab to toggle through the focusable elements.
## Creating a custom Appbar
Appbar exports layout unit components using which you can create a custom implementation of Appbar:
1. BaseAppbar
2. AppbarHead
3. AppbarBody
4. AppbarTail
5. useAppbar
You would need to add the responsive styles as they are not screen responsive by default.
These layout components do not respond to different screen sizes. You can wrap them in containers with media queries for the custom Appbar to adapt to screen sizes. For example:
```
@media only screen and (max-width: 600px) {
.container {
/* some styles */
}
.content {
/* some styles */
}
}
```
```jsx
const CustomAppbar = () => {
return (
// NavItems
)
}
```
## Hooks
Appbar exports a `useAppbar` hook to help you create custom functionality.
### useAppbar
React hook to implement the ability to open/close the Appbar in smaller screens. Use this hook when you are implementing your custom Appbar using the unit layout components. Let's look at the usage:
```jsx
import { Appbar, useAppbar } from "@asphalt-react/appbar"
const CustomAppbar = () => {
const { visible, open, close } = useAppbar({ defaultOpen: true })
return (