Header

The Header shows the current page's title, main actions, and optional description. It includes back navigation for nested pages, helping users understand their location in the app and move back easily.

Code


                                                        
                                                        
                                                            <template>
                                                          <w-header title="Patients">
                                                            <template #actions>
                                                              <w-button label="Import patients" variant="secondary" />
                                                              <w-button label="New patient" variant="primary" leading-icon="plus" />
                                                            </template>
                                                          </w-header>
                                                        </template>

Props

Name	Description	Type	Default	Values
parent-navigation	Array of objects representing the list of parent pages. For one parent page, it renders a Link. For more than one, it renders Breadcrumbs.	array		[ { label: String, href: String, to: String, isActive: Boolean } ]
title	Title of the page.	string
title-tag-type	Specifies the HTML tag for the title. Useful for changing the semantic meaning of the title.	string	h1	p, h1, h2, h3, h4, span, div
badge	Displays a trailing badge to support the page title.	string
badge-type	Specifies the type of the badge.	string	neutral	accent, accent-inverted, neutral, info, success, warning, danger, neutral-inverted, info-inverted, success-inverted, warning-inverted, danger-inverted
description	Displays an additional text below the title.	string

Slots

Name	Description
actions	Used to render header actions