- 1.5.0

Page Header

Accessible Header

Inspect element to see aria-label on nav

Attribute Type Documentation Default Value
id :string

html attribute id

 Read more Read less
"wc-page-header-header"
nav_id :string

nav html attribute id

 Read more Read less
"wc-page-header-nav"
class :any

html attribute class

 Read more Read less
nav_class :any

nav html attribute class

 Read more Read less
nav_label :string

Accessible label for the nav element
"Site navigation"
toggle_menu_label :string

Accessible label for the mobile menu toggle button
"Toggle mobile menu"
rest :global

additional HTML attributes for the header element
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

 
<:menu to="#docs">Documentation</:menu>
<:menu to="#api">API Reference</:menu>
<div class="py-8 text-center">
  <h2 class="text-3xl font-bold">Accessible Header</h2>
  <p class="mt-2 opacity-70">Inspect element to see aria-label on nav</p>
</div>
user_profile :slot

Appbar right side user_profile.
Show slot attributes Hide slot attributes
class :any

user profile container CSS classes
inner_block :slot

Hero or body content rendered inside the header area