Skip to content

Headers ​

All headers are adaptive.

SimpleHeader ​

image

Simple sticky header

MantineSimpleHeader ​

image

Simple sticky header in Mantine UI style

MantineLayeredHeader ​

image

Layered sticky header in Mantine UI style

SlidingHeader ​

image

Can contain two different headers, the second one appears after the user scrolls down the page

template
<AppHeader :threshold-hide="200" :threshold-open="400">
    <template #first-header>
        <AppHeaderFirst />
    </template>

    <template #second-header>
        <AppHeaderSecond />
    </template>
<AppHeader>