🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Navbar Vue Component

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

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-ios-light-surface-2 dark:bg-ios-dark-surface-2'
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

Renders outer hairlines (borders). If not specified, will be enabled for iOS theme

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

translucentbooleantrue

Makes Navbar background translucent (with backdrop-filter: blur) in iOS 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

showTextboolean | 'auto''auto'

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 navbar>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>
<k-segmented-button small strong active> Button </k-segmented-button>
<k-segmented-button small strong> Button </k-segmented-button>
<k-segmented-button small strong> Button </k-segmented-button>
</k-segmented>
</template>
</k-navbar>
<div class="relative">
<k-block strong-ios outline-ios>
<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>
</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.
2022 © Konsta UI by nolimits4web.