Navbar Vue Component

Navbar is a fixed area at the top of a screen that contains Page title and navigation elements.

Contents

There are following components included:

  • Navbar
  • NavbarBackLink
NameTypeDefaultDescription
bgClassstring

Additional class to add on Navbar's "background" element

centerTitlebooleanundefined

Makes centered navbar title. If not specified then it set it to center in iOS theme

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-gradient-to-b from-ios-light-surface to-transparent dark:from-ios-dark-surface/50'
colors.bgMaterialstring'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.textIosstring'text-black dark:text-white'
colors.textMaterialstring'text-md-light-on-surface dark:text-md-dark-on-surface'
componentstring'div'

Component's HTML Element

fontSizeIosstring'text-[17px]'

Tailwind CSS class for font size in iOS theme

fontSizeMaterialstring'text-[16px]'

Tailwind CSS class for font size in Material theme

innerClassstring

Additional class to add on Navbar's "inner" element

largebooleanfalse

Renders large-sized navbar with extra row for large-sized title which becomes usual size on scroll

leftstring

Content of the Navbar's "left" area

leftClassstring

Additional class to add on Navbar's "left" element

mediumbooleanfalse

Renders medium-sized navbar with extra row for medium-sized title which becomes usual size on scroll

outlinebooleanundefined

Material theme only: Renders outer hairlines (borders)

rightstring

Content of the Navbar's "right" area

rightClassstring

Additional class to add on Navbar's "right" element

scrollElanyundefined

Element required for correct "collapse" functionality for medium/large/transparent Navbar. If not specified, it will use Navbar's parent element

subnavbarstring

Content of the Navbar's "subnavbar" area

subnavbarClassstring

Additional class to add on Navbar's "subnavbar" element

subtitlestring

Content of the Navbar's "subtitle" area

subtitleClassstring

Additional class to add on Navbar's "subtitle" element

titlestring

Content of the Navbar's "title" area

titleClassstring

Additional class to add on Navbar's "title" element

titleFontSizeIosstring'text-[17px]'

Tailwind CSS class for navbar title font size in iOS theme

titleFontSizeMaterialstring'text-[22px]'

Tailwind CSS class for navbar title font size in Material theme

titleLargeFontSizeIosstring'text-[34px]'

Tailwind CSS class for large-sized navbar title font size in iOS theme

titleLargeFontSizeMaterialstring'text-[28px]'

Tailwind CSS class for large-sized navbar title font size in Material theme

titleMediumFontSizeIosstring'text-[24px]'

Tailwind CSS class for medium-sized navbar title font size in iOS theme

titleMediumFontSizeMaterialstring'text-[24px]'

Tailwind CSS class for medium-sized navbar title font size in Material theme

transparentbooleanfalse

Renders transparent navbar which becomes opaque on scroll

NameDescription
left

Content of the Navbar's "left" area

right

Content of the Navbar's "right" area

subnavbar

Content of the Navbar's "subnavbar" area

subtitle

Content of the Navbar's "subtitle" area

title

Content of the Navbar's "title" area

NavbarBackLink should be placed in Navbar's "left" area:

<k-navbar title="My App">
  <template #left>
    <k-navbar-back-link text="Back" @click="() => history.back()" />
  </template>
</k-navbar>
NameTypeDefaultDescription
componentstring'a'

Component's HTML Element

showTextbooleanfalse

Defines whether to show the link text. When 'auto', it hides link text for Material theme

textstring'Back'

Text content of the back link

NameDescription
text

Text content of the back link

Examples

Navbar.vue
<template>
<k-page>
<k-navbar
title="Navbar"
subtitle="Subtitle"
class="top-0 sticky"
:medium="size === 'Medium'"
:large="size === 'Large'"
:transparent="isTransparent"
>
<template #right>
<k-link>Right</k-link>
</template>
</k-navbar>
<div class="relative">
<k-block strong inset>
<p>
Navbar is a fixed area at the top of a screen that contains Page title
and navigation elements.
</p>
</k-block>
<k-block-title>Size</k-block-title>
<k-block-header>
Medium and Large will collapse to usual size on page scroll
</k-block-header>
<k-list strong inset>
<k-list-item
v-for="v in ['Default', 'Medium', 'Large']"
:key="v"
label
:title="v"
>
<template #after>
<k-radio
component="div"
:value="v"
:checked="size === v"
@change="() => (size = v)"
/>
</template>
</k-list-item>
</k-list>
<k-block-title>Transparent</k-block-title>
<k-block-header>
When navbar is transparent, its title and background will become visible
on page scroll
</k-block-header>
<k-list strong inset>
<k-list-item label title="Transparent">
<template #after>
<k-toggle
component="div"
:checked="isTransparent === true"
@change="() => (isTransparent = !isTransparent)"
/>
</template>
</k-list-item>
</k-list>
<k-block strong inset class="space-y-4">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto tempore
ratione unde accusantium distinctio nulla quia numquam earum odio,
optio, nisi rem deserunt. Molestiae delectus, ut assumenda numquam
magni enim.
</p>
<p>
Architecto molestias cum dolor dolorem provident consequuntur incidunt
sunt fugiat tenetur odio, recusandae placeat rem veniam. Voluptates,
repellendus odit, magni nesciunt, optio laborum asperiores repudiandae
consectetur suscipit ab cupiditate eum.
</p>
<p>
Aliquam, iste accusamus deleniti temporibus exercitationem neque
perferendis optio, blanditiis quisquam molestias perspiciatis cumque
harum tenetur veniam. Dolorum fugit doloribus est, deserunt, eligendi,
quaerat quidem itaque tempore laborum non illum?
</p>
<p>
Rerum magni sunt quis veniam, dolor ratione saepe ducimus tempore
voluptatum porro quod commodi? Aperiam laudantium deleniti totam
dolorum qui accusantium iste saepe facere optio, soluta maxime
mollitia deserunt cumque.
</p>
<p>
Iusto tempore quis provident, saepe illum ex ipsum cupiditate
explicabo ratione unde facere nemo delectus harum, blanditiis eius sit
asperiores nam. Aut cupiditate est tempore officia, perspiciatis esse
asperiores repudiandae?
</p>
<p>
Consequuntur itaque harum eos vero, reiciendis dolorum iure non earum
molestias tenetur sint enim, maxime recusandae ad perferendis
repudiandae! Sit, quos exercitationem beatae numquam laborum nobis
natus. Obcaecati, ea inventore.
</p>
<p>
Fugit culpa labore sapiente excepturi reiciendis, nulla, nihil neque
ut veritatis quis quibusdam dolorum? Voluptatibus animi officia
perspiciatis doloremque cum voluptatem, quia ratione modi vero,
consequatur ipsum, praesentium quibusdam amet?
</p>
<p>
Laudantium nihil sint nam placeat, nemo rerum ipsam explicabo iusto
dolores molestiae expedita eos consequuntur ut architecto consequatur
soluta ad maiores voluptatem tenetur in velit. Minima quia molestiae
nobis voluptatibus.
</p>
<p>
Expedita soluta quia inventore et placeat id exercitationem quisquam
eligendi est eius sapiente quo, cum nesciunt mollitia, sit veniam
ducimus tempora culpa adipisci commodi in autem nihil voluptatem
corporis? Perspiciatis.
</p>
<p>
Molestias, est? Eligendi vero distinctio voluptatem cumque id
voluptatibus, officia minima repellendus sit illo tempora labore
provident? Eum tenetur consectetur quae, in facilis autem ipsam
doloribus voluptate vitae suscipit nobis.
</p>
<p>
Obcaecati optio iste hic, soluta minus ullam, perferendis pariatur non
possimus autem nostrum libero sapiente. Corporis quo cum iusto
exercitationem velit. Non beatae eveniet asperiores ipsa consequuntur
temporibus sapiente earum!
</p>
<p>
Temporibus, omnis. Excepturi dolorum expedita laudantium quasi quod id
adipisci, esse, nam atque in, incidunt ex ab distinctio repellendus
beatae voluptatem alias odit illum quis. Illo numquam voluptatibus
error voluptatum!
</p>
</k-block>
</div>
</k-page>
</template>
<script>
import { ref } from 'vue';
import {
kPage,
kNavbar,
kNavbarBackLink,
kLink,
kBlock,
kBlockTitle,
kBlockHeader,
kList,
kListItem,
kRadio,
kToggle,
} from 'konsta/vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kLink,
kBlock,
kBlockTitle,
kBlockHeader,
kList,
kListItem,
kRadio,
kToggle,
},
setup() {
const size = ref('Default');
const isTransparent = ref(false);
return {
size,
isTransparent,
};
},
};
</script>
Subnavbar.vue
<template>
<k-page>
<k-navbar title="Subnavbar">
<template #subnavbar>
<k-segmented strong rounded>
<k-segmented-button active> Button </k-segmented-button>
<k-segmented-button> Button </k-segmented-button>
<k-segmented-button> Button </k-segmented-button>
</k-segmented>
</template>
</k-navbar>
<div class="relative">
<k-block strong inset>
<p>
Subnavbar is useful when you need to put any additional elements into
Navbar, like Tab Links or Search Bar. It also remains visible when
Navbar hidden.
</p>
</k-block>
<k-block strong inset class="space-y-4">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione
consequuntur numquam quia labore eligendi asperiores obcaecati neque
sapiente fugit vel praesentium accusantium, earum corporis officiis
tempora est delectus fugiat laudantium?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure
possimus, magni excepturi molestias consequatur commodi nihil velit
quo odit adipisci voluptatibus quam fugit nesciunt repellat
accusantium libero repudiandae consectetur alias!
</p>
<p>
Nihil unde iusto ab animi eum? Quia natus provident fugit, molestias
ea numquam qui distinctio ex perferendis fuga! Fugit voluptates
obcaecati ipsa recusandae eos saepe ducimus repudiandae. Explicabo,
fuga obcaecati!
</p>
<p>
Neque voluptas eius, quod consequatur officia dolor sunt cupiditate,
animi commodi cumque nam ex totam autem ipsum doloribus! Possimus
eligendi unde provident, esse molestias amet minus! Laboriosam veniam
alias eum.
</p>
<p>
Dicta obcaecati, architecto at ducimus suscipit dolor ea praesentium
sint? Deleniti ipsam magni dolorem amet quibusdam temporibus pariatur
suscipit voluptas, quas harum nesciunt culpa facere consequuntur id et
accusamus exercitationem!
</p>
<p>
Officiis, quibusdam reprehenderit corporis non nisi debitis magnam.
Deleniti, recusandae iusto repellendus dicta magni exercitationem
labore natus reiciendis sapiente error dolorum necessitatibus maxime
laborum esse suscipit praesentium ratione. Ex, in.
</p>
</k-block>
</div>
</k-page>
</template>
<script>
import {
kPage,
kNavbar,
kNavbarBackLink,
kBlock,
kSegmented,
kSegmentedButton,
} from 'konsta/vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kBlock,
kSegmented,
kSegmentedButton,
},
};
</script>
Code licensed under MIT.
2025 © Konsta UI by nolimits4web.