CompactHeader

Component

View code

Show playground

Props

Slots

 <template>
    <CompactHeader
        :navMenuItems="mainHeaderMenu"
        :userMenuItems="userDropdownMenu"
        userFullname="John Doe"
        userAvatarUrl="https://randomuser.me/api/portraits/men/45.jpg"
    >
        <template #top-header>
            <!-- Custom top header content here -->
        </template>
        
        <template #header-logo>
            <!-- Custom logo here -->
            <AppLogo
                :src="logo"
                class="max-w-[80px]"
            />
        </template>

        <template #header-actions="{ onClose }">
            <!-- Custom actions here. Call onClose() to close the enclosing
                 mobile menu dropdown after an action completes. -->
            <ActionButton
                text="New item"
                styleType="neutral-filled"
                @click="onClose"
            />
        </template>

        <template #bottom-header>
            <!-- Custom bottom header content here -->
        </template>
    </CompactHeader>
</template>
<script setup lang="ts">
const mainHeaderMenu = ref<mainHeaderMenu[]>([
    {
        text: "Home",
        to: "/",
    },
    {
        text: "About",
        to: "/about",
    },
    {
        text: "Contact",
        to: "/contact",
    },
])

const userDropdownMenu = ref<DropdownMenuItem[]>([
    {
        text: "Profile",
        to: "/profile",
    },
    {
        text: "Settings",
        to: "/settings",
    },
    {
        text: "Logout",
        to: "/logout",
    },
])
</script>
 

Usage

setAutoTitle

The setAutoTitle prop controls whether the compact header sets the page title. When it is true, the header calls useHead under the hood with the current route's title meta. Set it to false when the page title is managed elsewhere: the header then never calls useHead, so it cannot override your own title.

 <template>
    <CompactHeader
        :setAutoTitle="false"
    />
</template>
 

• Type: boolean
• Default: true

fallbackTitle

The fallbackTitle prop sets the page title used when the current route has no title meta. It only applies when setAutoTitle is true.

 <template>
    <CompactHeader
        fallbackTitle="My app"
    />
</template>
 

• Type: string
• Default: 'Page title'

pageTitleFormat

The compact header component uses useHead under the hood to set the page title based on the selected format as a fallback. It only applies when setAutoTitle is true.

By using the PageTitleFormat enum, you can choose between the available formats for the page title.

 <template>
    <CompactHeader
        :pageTitleFormat="PageTitleFormat.FULL"
    />
</template>
 

• Type: PageTitleFormat
• Default: PageTitleFormat.SIMPLE

Options

navMenuItems

The navMenuItems prop allows you to define the navigation menu items displayed in the compact header. You can pass an array of MenuItem objects to customize the menu, including optional children for submenu items.

 <template>
    <CompactHeader
        :navMenuItems="mainHeaderMenu"
    />
</template>
<script setup lang="ts">
const mainHeaderMenu = ref<MenuItem[]>([
    {
        text: "Home",
        to: "/",
    },
    {
        text: "About",
        to: "",
        submenuDropdownClass: "min-w-[320px]",
        children: [
            {
                text: "Team",
                to: "/about/team",
            },
            {
                text: "Mission",
                to: "/about/mission",
            },
        ],
    },
    {
        text: "Contact",
        to: "/contact",
    },
])
</script>
 

TypeScript interface

 interface MenuItem {
    text: string
    to: string
    children?: {
        text: string
        to: string
    }[]
    submenuDropdownClass?: string
}
 

submenuYOffset

The submenuYOffset prop allows you to control the vertical offset in pixels for nav menu submenus.

 <template>
    <CompactHeader
        :navMenuItems="mainHeaderMenu"
        :submenuYOffset="12"
    />
</template>
 

• Type: number
• Default: 8

submenuDropdownClass

The submenuDropdownClass prop allows you to define the default class for submenu dropdown containers (for example width classes).

If a menu item defines submenuDropdownClass, that item value takes precedence over submenuDropdownClass.

 <template>
    <CompactHeader
        :navMenuItems="mainHeaderMenu"
        submenuDropdownClass="min-w-[280px]"
    />
</template>
 

• Type: string
• Default: 'min-w-[220px]'

submenuTrigger

The submenuTrigger prop controls how nav menu submenus are opened.

 <template>
    <CompactHeader
        :navMenuItems="mainHeaderMenu"
        :submenuTrigger="Trigger.HOVER"
    />
</template>
 

• Type: Trigger
• Default: Trigger.CLICK

Options

userFullname

The userFullname prop allows you to set the full name of the user to be displayed in the compact header.

 <template>
    <CompactHeader
        userFullname="John Doe"
    />
</template>
 

• Type: string

userAvatarUrl

The userAvatarUrl prop allows you to set the URL of the user's avatar image to be displayed in the compact header.

 <template>
    <CompactHeader
        userAvatarUrl="https://randomuser.me/api/portraits/men/45.jpg"
    />
</template>
 

• Type: string

userMenuItems

The userMenuItems prop allows you to define the dropdown menu items for the user profile section in the compact header. You can pass an array of DropdownMenuItem objects to customize the menu.

 <template>
    <CompactHeader
        :userMenuItems="userDropdownMenu"
    />
</template>
<script setup lang="ts">
const userDropdownMenu = ref<DropdownMenuItem[]>([
    {
        text: "Profile",
        to: "/profile",
    },
    {
        text: "Settings",
        to: "/settings",
    },
    {
        text: "Logout",
        to: "/logout",
    },
])
</script>
 

TypeScript interface

 interface DropdownMenuItem {
    actionType?: DropdownActionType
    text?: string
    icon?: any
    size?: DropdownItemSize
    type?: DropdownItemType
    userDisplayName?: string
    userProfileImg?: string
    imgUrl?: string
    alt?: string
    helpText?: string
    to?: string
    isExternal?: boolean
    hasSeparator?: boolean
    callback?: () => void
}
 

mobileBreakpoint

The mobileBreakpoint prop sets the viewport width (in pixels) below which the compact header switches to its mobile layout. It is the single source of truth for responsive switching: below it the horizontal nav menu, header actions, and desktop content are hidden and the mobile menu and sidebar toggles appear; at or above it the desktop layout is shown.

 <template>
    <CompactHeader
        :mobileBreakpoint="1024"
    />
</template>
 

• Type: number
• Default: 1024

showMobileMenuToggle

The showMobileMenuToggle prop allows you to control the visibility of the mobile menu toggle button in the compact header.

 <template>
    <CompactHeader
        :showMobileMenuToggle="true"
    />
</template>
 

• Type: boolean
• Default: true

showMobileSidebarToggle

The showMobileSidebarToggle prop allows you to control the visibility of the mobile sidebar toggle button in the compact header.

 <template>
    <CompactHeader
        :showMobileSidebarToggle="true"
    />
</template>
 

• Type: boolean
• Default: true

sidebarTogglePosition

The sidebarTogglePosition prop allows you to set the position of the sidebar toggle button in the compact header. You can choose from predefined positions using the SidebarTogglePosition enum.

 <template>
    <CompactHeader
        :sidebarTogglePosition="SidebarTogglePosition.RIGHT_SIDE"
    />
</template>
 

• Type: SidebarTogglePosition
• Default: SidebarTogglePosition.RIGHT_SIDE

Options

hasBorder

The hasBorder prop allows you to add a bottom border to the compact header.

 <template>
    <CompactHeader
        :hasBorder="true"
    />
</template>
 

• Type: boolean
• Default: false

isSticky

The isSticky prop allows you to make the compact header stick to the top of the viewport when scrolling.

 <template>
    <CompactHeader
        :isSticky="true"
    />
</template>
 

• Type: boolean
• Default: false

hasGlassEffect

The hasGlassEffect prop allows you to apply a background glass effect to the compact header.

 <template>
    <CompactHeader
        :hasGlassEffect="true"
    />
</template>
 

• Type: boolean
• Default: false

detectActiveMenuItem

The detectActiveMenuItem prop allows you to enable or disable the automatic detection of the active menu item based on the current route.

 <template>
    <CompactHeader
        :navMenuItems="mainHeaderMenu"
        :detectActiveMenuItem="true"
    />
</template>
<script setup lang="ts">
const mainHeaderMenu = ref<MenuItem[]>([
    {
        text: "Home",
        to: "/",
    },
    {
        text: "About",
        to: "/about",
    },
    {
        text: "Contact",
        to: "/contact",
    },
])
</script>
 

• Type: boolean
• Default: true

prefetchOn

Controls when header route targets should be prefetched. It uses either the PrefetchOnStrategy type or the PrefetchOn enum.

 <template>
    <CompactHeader
        :navMenuItems="mainHeaderMenu"
        :prefetchOn="PrefetchOn.INTERACTION"
    />
</template>
 

• Type: PrefetchOnStrategy
• Default: PrefetchOn.VISIBILITY

Options

You can also pass an object strategy:

 {
    visibility: true,
    interaction: true,
}
 

navMenuClass

The navMenuClass prop allows you to add custom CSS classes to the navigation menu container in the compact header. Show/hide is controlled by mobileBreakpoint; these classes are additive styling, not visibility.

 <template>
    <CompactHeader
        navMenuClass="custom-nav-class"
    />
</template>
 

• Type: string
• Default: ''

navMobileMenuClass

The navMobileMenuClass prop allows you to add custom CSS classes to the mobile navigation menu container in the compact header. Show/hide is controlled by mobileBreakpoint; these classes are additive styling, not visibility.

 <template>
    <CompactHeader
        navMobileMenuClass="min-w-[280px] custom-mobile-nav-class"
    />
</template>
 

• Type: string
• Default: 'min-w-[280px]'

zIndex

The zIndex prop sets the CSS z-index for all dropdowns rendered by the compact header: the nav menu submenu, the user menu, and the mobile menu. Use it to ensure consistent stacking and to avoid conflicts with other fixed or sticky elements on the page.

 <template>
    <CompactHeader
        :isSticky="true"
        zIndex="100"
    />
</template>
 

• Type: string
• Default: '50'

headerClass

The headerClass prop allows you to add custom CSS classes to the header.

 <template>
    <CompactHeader
        headerClass="custom-header-class"
    />
</template>
 

sidebarOpenAriaLabel

The sidebarOpenAriaLabel prop sets the accessible label for the sidebar toggle button when the sidebar is closed. Override it for i18n.

 <template>
    <CompactHeader
        sidebarOpenAriaLabel="Abrir barra lateral"
    />
</template>
 

• Type: string
• Default: 'Open sidebar'

sidebarCloseAriaLabel

The sidebarCloseAriaLabel prop sets the accessible label for the sidebar toggle button when the sidebar is open. Override it for i18n.

 <template>
    <CompactHeader
        sidebarCloseAriaLabel="Cerrar barra lateral"
    />
</template>
 

• Type: string
• Default: 'Close sidebar'

mobileMenuAriaLabel

The mobileMenuAriaLabel prop sets the accessible label for the mobile menu toggle button. Override it for i18n.

 <template>
    <CompactHeader
        mobileMenuAriaLabel="Abrir menú móvil"
    />
</template>
 

• Type: string
• Default: 'Open mobile menu'