AppBar

A top bar or header bar for applications, often used for navigation or branding.

Report Issue Github

Usage

Basic Usage

Render the AppBar with its sub-components: Header, Body, and Action.


<AppBar variant="solid" position="block">
  <AppBar.Header>
    <IconButton highContrast variant="transparent">
      <Icon type="Home" />
    </IconButton>
  </AppBar.Header>
  <AppBar.Action>
    <Button variant="transparent" highContrast>
      Blog
    </Button>
    <IconButton variant="transparent" highContrast>
      <Icon type="Github" />
    </IconButton>
  </AppBar.Action>
</AppBar>

Variants

You can change the visual appearance of the AppBar using the variant prop.


<AppBar variant="transparent" position="block">
  <AppBar.Header>
    <IconButton highContrast variant="transparent">
      <Icon type="Home" />
    </IconButton>
  </AppBar.Header>
  <AppBar.Action>
    <Button variant="transparent" highContrast>
      Blog
    </Button>
    <IconButton variant="transparent" highContrast>
      <Icon type="Github" />
    </IconButton>
  </AppBar.Action>
</AppBar>

Body

You can have Body of the AppBar.


<AppBar position="block">
  <AppBar.Header>
    <IconButton highContrast variant="transparent">
      <Icon type="Home" />
    </IconButton>
  </AppBar.Header>
  <AppBar.Body>
    <Tab.Root highContrast defaultValue="tab1">
      <Tab.List variant="solid" highContrast>
        <Tab.Trigger value="tab1" onClick={() => alert('Tab 1 clicked!')}>
          Tab 1
        </Tab.Trigger>
        <Tab.Trigger value="tab2" onClick={() => alert('Tab 2 clicked!')}>
          Tab 2
        </Tab.Trigger>
      </Tab.List>
    </Tab.Root>
  </AppBar.Body>
  <AppBar.Action>
    <Button variant="transparent" highContrast>
      Blog
    </Button>
    <IconButton variant="transparent" highContrast>
      <Icon type="Github" />
    </IconButton>
  </AppBar.Action>
</AppBar>

Positions

Set the positioning of the AppBar.


<AppBar position="block">
  <AppBar.Header>
    <IconButton highContrast variant="transparent">
      <Icon type="Home" />
    </IconButton>
  </AppBar.Header>
  <AppBar.Action>
    <Button variant="transparent" highContrast>
      Blog
    </Button>
    <IconButton variant="transparent" highContrast>
      <Icon type="Github" />
    </IconButton>
  </AppBar.Action>
</AppBar>

API

Props

AppBar

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`variant`	`'solid' \| 'transparent' \| 'translucent'`	`'solid'`	-
`position`	`'block' \| 'absolute' \| 'fixed'`	`'fixed'`	-

Header

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-

Body

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-

Action

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`mobile`	`boolean`	`false`	-

Anchor

Breadcrumb