App Bar — Ogonëk M3 Docs

App Bars sit at the top of the screen for branding, titles, and actions. This implementation is mobile-only (md:hidden) — on larger screens the title and actions typically move into the Rail's footer or a page header instead.

M3 Spec

open_in_new

Overview

The AppBar component implements the Material Design 3 Top App Bar pattern. It listens to window scroll and switches to an elevated, tinted surface once the page scrolls past 10px.

Import

import { AppBar } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here.

widgets

Playground

Title, subtitle, showBack, and ghost Controls.

widgets

With Back and Subtitle

A detail-screen bar with a back button and subtitle.

Basic Usage

AppBar is fixed and mobile-only; give it ghost so page content isn't hidden underneath it:

<script lang="ts">
  import { AppBar, ButtonIcon } from '@noxlovette/material';
</script>

<AppBar title="Inbox" ghost>
  {#snippet trailing()}
    <ButtonIcon variant="text" iconProps={{ name: 'search' }} />
    <ButtonIcon variant="text" iconProps={{ name: 'more_vert' }} />
  {/snippet}
</AppBar>

AppBar Props

Prop	Type	Default	Description
`title` required	`string`	`—`	The screen title.
`subtitle`	`string`	`—`	Optional subtitle rendered below the title.
`leading`	`Snippet`	`—`	Content on the left, e.g. a back button (see showBack) or a menu icon.
`trailing`	`Snippet`	`—`	Action icons rendered on the right.
`showBack`	`boolean`	`false`	Reserves leading space for a back button. Combine with the leading snippet to render one.
`ghost`	`boolean`	`false`	Renders an invisible same-height spacer after the fixed bar so content below it is not obscured.

Accessibility

title

Heading semantics

The title renders as an <h1>, giving screen readers a clear page-level heading.

smartphone

Landmark

The bar renders as a <nav> element, announced as a landmark by assistive technology.