- 1.5.0

Simple Appbar

DM
Attribute Type Documentation Default Value
id :any

HTML id attribute
class :any

Additional CSS classes
title :string

Appbar title
""
toggle_menu_label :string

Accessible label for the mobile menu toggle button
"Toggle mobile menu"
nav_label :string

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

Appbar 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

 
<: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>
user_profile :slot

Appbar right side user profile

 
<: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>