Skip to content
NAVIGATION · FREE

AppBar

A clean top bar that adapts from wide desktops to small phones.

The top bar of your application, for the title and the main actions. Put links in it and they sit in the bar on wide screens and fold behind a menu on small ones.

Why it helps

  • Adapts from desktop to phone
  • Title and actions
  • Navigation links fold away

Where it fits

  • Application headers
  • Portals
  • Marketing sites
AppBar control in a RayCraft page

Example

<AppBar>
    <strong>My app</strong>
    <span style="flex:1"></span>
    <Button Variant="Variant.Text">Home</Button>
    <Button Variant="Variant.Text">About</Button>
</AppBar>

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation