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

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-bars-ios-light dark:bg-bars-ios-dark'

Navbar bg color in iOS theme

colors.bgMaterialstring'bg-bars-material-light dark:bg-bars-material-dark'

Navbar bg color in iOS theme

colors.titlestring'text-black dark:text-white'

Title text color

componentstring'div'

Component's HTML Element

fontSizeIosstring'text-navbar-ios'

Tailwind CSS class for font size in iOS theme

fontSizeMaterialstring'text-navbar-material'

Tailwind CSS class for font size in Material theme

hairlinesbooleantrue

Renders outer hairlines (borders) on iOS theme

innerClassstring

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

leftstring

Content of the Navbar's "left" area

leftClassstring

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

rightstring

Content of the Navbar's "right" area

rightClassstring

Additional class to add on Navbar's "right" 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

translucentbooleantrue

Makes Navbar background translucent (with backdrop-filter: blur) in iOS theme

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:

<twm-navbar title="My App">
  <template #left>
    <twm-navbar-back-link text="Back" @click="() => history.back()" />
  </template>
</twm-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>
<twm-page>
<twm-navbar title="Navbar" subtitle="Subtitle" class="top-0 sticky">
<template #right>
<twm-link navbar>Right</twm-link>
</template>
</twm-navbar>
<div class="relative">
<twm-block strong>
<p>
Navbar is a fixed area at the top of a screen that contains Page title
and navigation elements.
</p>
</twm-block>
</div>
</twm-page>
</template>
<script>
import {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmLink,
twmBlock,
} from 'tailwind-mobile/vue';
export default {
components: {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmLink,
twmBlock,
},
};
</script>
Subnavbar.vue
<template>
<twm-page>
<twm-navbar title="Subnavbar">
<template #subnavbar>
<twm-segmented strong>
<twm-segmented-button small strong active>
Button
</twm-segmented-button>
<twm-segmented-button small strong> Button </twm-segmented-button>
<twm-segmented-button small strong> Button </twm-segmented-button>
</twm-segmented>
</template>
</twm-navbar>
<div class="relative">
<twm-block strong>
<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>
</twm-block>
</div>
</twm-page>
</template>
<script>
import {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmBlock,
twmSegmented,
twmSegmentedButton,
} from 'tailwind-mobile/vue';
export default {
components: {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmBlock,
twmSegmented,
twmSegmentedButton,
},
};
</script>
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.