Navbar Svelte 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

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:

<Navbar title="My App">
  <NavbarBackLink slot="left" text="Back" onClick={() => history.back()} />
</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

onClickfunction(e)

Link click handler

onClickfunction(e)

click event handler

NameDescription
text

Text content of the back link

Examples

Navbar.svelte
<script>
import { Page, Navbar, NavbarBackLink, Link, Block } from 'konsta/svelte';
</script>
<Page>
<Navbar title="Navbar" subtitle="Subtitle" class="top-0 sticky">
<Link slot="right" navbar>Right</Link>
</Navbar>
<div class="relative">
<Block strong>
<p>
Navbar is a fixed area at the top of a screen that contains Page title
and navigation elements.
</p>
</Block>
</div>
</Page>
Subnavbar.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
Block,
Segmented,
SegmentedButton,
} from 'konsta/svelte';
</script>
<Page>
<Navbar title="Subnavbar">
<Segmented
slot="subnavbar"
strong
activeButtonIndex={0}
childButtonsLength={3}
>
<SegmentedButton small strong active>Button</SegmentedButton>
<SegmentedButton small strong>Button</SegmentedButton>
<SegmentedButton small strong>Button</SegmentedButton>
</Segmented>
</Navbar>
<div class="relative">
<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>
</Block>
</div>
</Page>
Code licensed under MIT.
2021 © Konsta UI by nolimits4web.