- 1.5.0

Page Header

Welcome to Duskmoon UI

A component library for Phoenix LiveView

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="#home">Home</:menu>
<:menu to="#about">About</:menu>
<:menu to="#docs">Docs</:menu>
<:user_profile>
  <span class="text-sm px-4">(^_^)</span>
</:user_profile>
<div class="py-12 text-center">
  <h1 class="text-4xl font-bold">Welcome to Duskmoon UI</h1>
  <p class="text-lg mt-4 opacity-70">A component library for Phoenix LiveView</p>
</div>
user_profile :slot

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

user profile container CSS classes

 
<:menu to="#home">Home</:menu>
<:menu to="#about">About</:menu>
<:menu to="#docs">Docs</:menu>
<:user_profile>
  <span class="text-sm px-4">(^_^)</span>
</:user_profile>
<div class="py-12 text-center">
  <h1 class="text-4xl font-bold">Welcome to Duskmoon UI</h1>
  <p class="text-lg mt-4 opacity-70">A component library for Phoenix LiveView</p>
</div>
inner_block :slot

Hero or body content rendered inside the header area