Top App Bar

Global navigation for mobile/tablet placed at the top of the screen.

Last updated 11/1/2024

Variants

Consists of NavBar for navigation and TitleBar for page titles. Combine multiple TopAppBars to support diverse layouts.

Nav Bar
Title Bar (with Trailing Icon): Page Title
Nav Bar + Title Bar: Page Title
Nav Bar + Title Bar (with Icons): Page Title

import { Dd, Dl, Dt } from "@/components/LayoutUtils";
import { IconButton } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";
import { TopAppBar } from "@serendie/ui";

export function TypeSample() {
  return (
    <Dl variant="dim">
      <Dt>Nav Bar</Dt>
      <Dd>
        <TopAppBar
          type="navbar"
          headingIconButton={
            <IconButton
              icon={<SerendieSymbol name="menu" />}
              styleType="ghost"
              shape="rectangle"
            />
          }
          trailingIconButtons={
            <IconButton
              icon={<SerendieSymbol name={"magnifying-glass"} />}
              styleType="ghost"
              shape="rectangle"
            />
          }
        />
      </Dd>

      <Dt>Title Bar (with Trailing Icon)</Dt>
      <Dd>
        <TopAppBar
          type="titleBar"
          title="Page Title"
          trailingIconButtons={
            <IconButton
              icon={<SerendieSymbol name={"plus"} />}
              styleType="ghost"
              shape="rectangle"
            />
          }
        />
      </Dd>

      <Dt>Nav Bar + Title Bar</Dt>
      <Dd>
        <TopAppBar
          type="navbar"
          headingIconButton={
            <IconButton
              icon={<SerendieSymbol name="menu" />}
              styleType="ghost"
              shape="rectangle"
            />
          }
          trailingIconButtons={
            <IconButton
              icon={<SerendieSymbol name={"magnifying-glass"} />}
              styleType="ghost"
              shape="rectangle"
            />
          }
        />
        <TopAppBar type="titleBar" title="Page Title" />
      </Dd>

      <Dt>Nav Bar + Title Bar (with Icons)</Dt>
      <Dd>
        <TopAppBar
          type="navbar"
          headingIconButton={
            <IconButton
              icon={<SerendieSymbol name="menu" />}
              styleType="ghost"
              shape="rectangle"
            />
          }
          trailingIconButtons={
            <IconButton
              icon={<SerendieSymbol name={"magnifying-glass"} />}
              styleType="ghost"
              shape="rectangle"
            />
          }
        />
        <TopAppBar
          type="titleBar"
          title="Page Title"
          headingIconButton={
            <IconButton
              icon={<SerendieSymbol name="chevron-left" />}
              styleType="ghost"
              shape="rectangle"
            />
          }
          trailingIconButtons={
            <IconButton
              icon={<SerendieSymbol name={"plus"} />}
              styleType="ghost"
              shape="rectangle"
            />
          }
        />
      </Dd>
    </Dl>
  );
}