HeaderMenu

A menu that scores an header.

Example

Props

🕹️ standard props
openDrawer
boolean
Controls the open state of the drawer
false
title
string
Title of the header
hideOnScroll
boolean
Hides the header on scroll down
true
initialRemoveShadow
boolean
Initial state of shadow removal
false
color
string
Text color of the header
undefined
mobileMenu
boolean
Controls the visibility of the mobile menu
true
zIndex
number
Z-index of the header
25
🎨 style props
--header-menu-width
size
Width of the header menu
100vw
--header-menu-height
size
Height of the header menu
56px

Slots

drawerSnippet
Slot for custom drawer content
titleSnippet

Slot for custom title content

Default content:

<span style:font-size="24px" style:line-height="32px">{title}</span>
    

appendSnippet
Slot for additional content to append
prependSnippet

Slot for content to prepend

Default content:

<div
  style:width="fit-content"
  style:margin-left="10px"
  style:margin-right="10px"
  class:hide-on-desktop={!mobileMenu}
>
  <Button 
    buttonType="icon" 
    icon="mdi-menu" 
    onclick={toggleDrawer} 
    --button-default-background-color="transparent"
  />
</div>
    

Available variables:

Name	Type	Description
toggleDrawer	function	Function to toggle the drawer
openDrawer	boolean	Indicates if the drawer is open

Events

ondrawerChange

Triggered when the drawer state changes

Attribute	Type	Description
opened	boolean	Indicates whether the drawer is open or not