Top App Bar
MD3 top app bar — small, medium, large and center-aligned.
Walkthrough
1. Sizes
Small, centred, medium and large — the four MD3 shapes. small for a dense dashboard page, large where the headline is the point.
September revenue
September revenue
September revenue
September revenue
<script lang="ts"> import { IconButton, TopAppBar } from 'omaris';</script>{#snippet back()} <IconButton aria-label="Back"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"> <path d="M15 5l-7 7 7 7" stroke-linecap="round" stroke-linejoin="round" /> </svg> </IconButton>{/snippet}<div class="flex w-full flex-col gap-4"> <div class="overflow-hidden rounded-shape-lg border border-border"> <TopAppBar size="small" title="September revenue" variant="surface"> {#snippet leading()}{@render back()}{/snippet} </TopAppBar> </div> <div class="overflow-hidden rounded-shape-lg border border-border"> <TopAppBar size="center" title="September revenue" variant="surface"> {#snippet leading()}{@render back()}{/snippet} </TopAppBar> </div> <div class="overflow-hidden rounded-shape-lg border border-border"> <TopAppBar size="medium" title="September revenue" variant="surface"> {#snippet leading()}{@render back()}{/snippet} </TopAppBar> </div> <div class="overflow-hidden rounded-shape-lg border border-border"> <TopAppBar size="large" title="September revenue" variant="surface"> {#snippet leading()}{@render back()}{/snippet} </TopAppBar> </div></div>2. Actions
leading and actions are the two ends; the title takes what is left. A back arrow on a detail screen, a menu button when the drawer is modal.
Inbox
<script lang="ts"> import { Badge, IconButton, TopAppBar } from 'omaris';</script><div class="w-full overflow-hidden rounded-shape-lg border border-border"> <TopAppBar title="Inbox" variant="surface"> {#snippet leading()} <IconButton aria-label="Open navigation"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"> <path d="M4 7h16M4 12h16M4 17h16" stroke-linecap="round" /> </svg> </IconButton> {/snippet} {#snippet actions()} <span class="relative inline-flex"> <IconButton aria-label="Notifications"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"> <path d="M18 16V11a6 6 0 1 0-12 0v5l-2 3h16z" stroke-linejoin="round" /> </svg> </IconButton> <Badge anchor="top-end" value={12} tone="destructive" label="12 unread" /> </span> <IconButton aria-label="More"> <svg viewBox="0 0 24 24" fill="currentColor"> <circle cx="12" cy="5" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="12" cy="19" r="1.6" /> </svg> </IconButton> {/snippet} </TopAppBar></div>3. Scroll behaviour
sticky holds it at the top of the scrolling column, and it takes elevation the moment there is content under it. flexible shrinks a large headline into a small bar as you scroll — try it.
September revenue
<script lang="ts"> import { AppShell, AppShellMain, AppShellContent, TopAppBar } from 'omaris';</script><div class="h-80 w-full overflow-hidden rounded-shape-lg border border-border"> <AppShell class="h-full"> <AppShellMain> <TopAppBar size="large" title="September revenue" flexible sticky variant="surface" /> <AppShellContent width="md"> <div class="flex flex-col gap-3"> {#each { length: 14 }, i (i)} <div class="h-12 rounded-shape-md bg-surface-container"></div> {/each} </div> </AppShellContent> </AppShellMain> </AppShell></div>