Provide stable navigation and application context without crowding the current task.
A global header identifies the application and gives people access to destinations or actions shared across screens. Keep its organization stable so people can move between tasks without relearning the interface. Put page-specific editing controls near the content they affect.
Use AdaptiveAppLayout when the application needs its coordinated bars, sidebar, and content area. Its slots accept application-owned navigation and actions. Use AppBar with placement="top" for a header composed from start, center, and end slots when that standalone structure is appropriate.
AppBar renders a header and arranges supplied content; it does not choose routes, mark the current destination, or automatically move excess commands into a Menu. Compose supported Links for destinations and Buttons or Menu for actions. Avoid placing another AppBar inside an AdaptiveAppLayout bar when a slot can hold the content directly.
Keep application identity, primary destinations, and shared utilities distinguishable. An account menu and project navigation have different purposes even if both open a popup. Label navigation regions when more than one exists.
Figure in preparation
Global header: component composition
Stable destinations across wide and compact navigation.
Preserve the same destination names in wide and compact presentations. If a route fails to load, keep a working route back or a retry action rather than replacing all navigation with an error.
Specify the current route, an open navigation surface, pending navigation, and unavailable destinations separately. Routing state belongs to the application. An expanded menu is not proof that a route is active, and a selected visual state does not authorize access.
Let the chosen layout own content clearance. AdaptiveAppLayout supplies automatic content insets by default; contentInset="none" makes that clearance the application's responsibility through its public layout inset tokens. Do not compensate with arbitrary padding on internal library elements.
When labels no longer fit, reduce competing content or deliberately choose a compact presentation. Do not hide the only access to an important destination. Use Overflow content for action relocation and Search when search belongs in the header.
Use concise, stable destination names. Separate navigation labels from action verbs. Give icon-only utilities meaningful accessible names, and keep account identity readable when people can switch between accounts or workspaces.
Use header and navigation landmarks appropriately and avoid duplicate landmark labels. Mark the current destination through supported link attributes such as aria-current="page". Keep a route to main content, and ensure anchored headings and focused controls are not obscured by bars.
Review keyboard order through the wide and compact layouts, focus when navigation closes, browser history, and long labels. Application routing and focus management still require testing even when the shell supplies layout and sidebar behavior.
Read AdaptiveAppLayout, AppBar, BarLayout, Link, and Menu.