Toolbar

The Toolbar component provides a top-level navigation and action bar. It supports optional left, center, and right sections, as well as avatars and customizable appearance.

Usage & Examples

Default

default.tsx

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

Visual variants

Themes

primary
secondary
tertiary
quaternary

Variants

solid
outline
glass

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar theme="primary"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar theme="secondary"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar theme="tertiary"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar theme="quaternary"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

// Variants

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar variant="solid"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar variant="outline"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar variant="glass"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

// Rounding

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar rounding="none"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar rounding="medium"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar rounding="large"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

// Shadows

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar shadow="none"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar shadow="light"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

  const leftIcon = (
    <IconButton theme="clear" shadow="none" icon={FaArrowLeft} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar shadow="strong"
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

Props API

32 props
Columns
Toolbar props API
Default
Description
aria-describedbystringNoaria—References one or more elements that describe the toolbar.
aria-labelstringNoaria"Toolbar"Accessible name for the toolbar. Prefer this over the legacy `ariaLabel` prop.
aria-labelledbystringNoaria—References another element that labels the toolbar. Prefer this over `aria-label` when there is visible text available.
attachmentAttachmentTypeNoprops"static"How the toolbar attaches to the viewport or page layout. "static" | "fixed" | "sticky"
avatar{ name?: string; src?: string; size?: SizeType; shape?: "circle" | "square" | "rounded"; theme?: ThemeType; onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void; "aria-label"?: string; variant?: VariantType; }Noprops—Optional avatar settings displayed at the far right.
avatarClassNamestringNoprops—Optional additional class names for the rendered avatar component.
avatarWrapperClassNamestringNoprops—Optional additional class names for the avatar wrapper.
centerReactNodeNoprops—Content to render in the center section, below the title if present.
centerAriaLabelstringNoprops"Toolbar center section"Optional accessible label for the center section.
centerClassNamestringNoprops—Optional additional class names for the center section wrapper. Alias for `centerSectionClassName`.
centerContentClassNamestringNoprops—Optional additional class names for the center section content wrapper.
centerSectionClassNamestringNoprops—Optional additional class names for the center section wrapper.