Dowe

LAYOUT

AppBar

AppBar provides top-level navigation through explicit top, start, center, end, and bottom regions.

MENTAL MODEL

Place the bar in a Scaffold

Scaffold owns shell placement. AppBar owns the horizontal content regions and their visual surface. boxed:true keeps that surface full width while centering its inner content at 96rem on web or 1536 logical units on Android and iOS.

layout MainLayout
  Scaffold
    appBar
      AppBar variant:"soft" scheme:"surface" position:"sticky" boxed:true bordered:true hideOnScroll:true
        top
          Marquee speed:"slow"
            Text size:"xs"
              "Product announcement"
        start
          Text weight:"bold"
            "Dowe"
        center
          Text size:"sm"
            "Documentation"
        end
          Button href:"/" variant:"ghost" scheme:"primary" size:"sm"
            "Home"
        bottom
          Text size:"xs" color:"muted"
            "Scroll down to hide · scroll up to reveal"
    main
      children

LIVE EXAMPLES

AppBar inside its real shell

Each preview is a complete routed page with one Scaffold, so scrolling and shell spacing remain observable.

Fixed and boxed

Sticky, floating, and blurred

Full-width regions and scroll reveal

Scroll down to hide the AppBar, then scroll upward to reveal it again.

REGIONS

A full-width frame around the main row

top and bottom span the AppBar. start and end size to their content, while center takes the flexible space between them. Each region can contain ordinary view nodes.

Use sticky or fixed AppBars inside Scaffold appBar. Scaffold measures fixed bars automatically; outside Scaffold, a fixed AppBar overlays normal web content.

Child	Requirement	Purpose
No data There are no records to display

API

Props

AppBar also accepts applicable common spacing, sizing, typography, visibility, and accessibility props.

Prop	Type	Default
No data There are no records to display

No data

No data