- 1.5.0

Appbar

DM Accessible App
Attribute Type Documentation Default Value
id :any

HTML id attribute
class :any

Additional CSS classes (e.g., appbar-primary, appbar-elevated)
title :string

Appbar title
""
title_to :string

Navigation path for brand area (logo + title)
sticky :boolean

Whether the appbar is sticky
true
nav_label :string

Accessible label for the navigation landmark (i18n)
"Main navigation"
rest :global
menu :slot

Appbar navigation menus
Show slot attributes Hide slot attributes
class :any

menu item CSS classes
to :string

navigation path
active :boolean

whether this menu item is the current page

 
<:logo>
  <span class="text-xl font-bold">DM</span>
</:logo>
<:menu to="#">Home</:menu>
<:menu to="#">About</:menu>
<:user_profile>
  <button type="button" class="btn btn-sm btn-ghost">Login</button>
</:user_profile>
logo :slot

Appbar Logo (displayed in the brand area)

 
<:logo>
  <span class="text-xl font-bold">DM</span>
</:logo>
<:menu to="#">Home</:menu>
<:menu to="#">About</:menu>
<:user_profile>
  <button type="button" class="btn btn-sm btn-ghost">Login</button>
</:user_profile>
after_title :slot

Content rendered after the title, still in the left/brand area
user_profile :slot

Appbar right side user profile / actions

 
<:logo>
  <span class="text-xl font-bold">DM</span>
</:logo>
<:menu to="#">Home</:menu>
<:menu to="#">About</:menu>
<:user_profile>
  <button type="button" class="btn btn-sm btn-ghost">Login</button>
</:user_profile>