---
name: AppBar
menu: UI Kit
---

import { Playground, PropsTable } from "docz";

import { AppBar, Begin, End, Navigation, NavigationItem, Divider } from "./";
import { Logo } from "../Brand";
import Flex from "../Flex";
import Icon from "../Icon";
import BaseButton from "../BaseButton";

# AppBar

## Basic usage

<Playground>
  <AppBar gutterBegin gutterEnd>
    <Begin itemGutter="double">
      <Logo />
      <Navigation>
        <NavigationItem active>Home</NavigationItem>
        <NavigationItem>Team</NavigationItem>
      </Navigation>
    </Begin>
    <End itemGutter>
      <BaseButton>
        <Icon size="lg">history</Icon>
      </BaseButton>
      <Divider />
      <BaseButton>
        <Icon size="lg">account_box</Icon>
      </BaseButton>
    </End>
  </AppBar>
</Playground>
