Navbar Svelte Component

Navbar Components
Navbar Props
Navbar Slots
NavbarBackLink Props
NavbarBackLink Slots
Examples

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

Name	Type	Default	Description
bgClass	string		Additional class to add on Navbar's "background" element
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-bars-ios-light dark:bg-bars-ios-dark'	Navbar bg color in iOS theme
colors.bgMaterial	string	'bg-bars-material-light dark:bg-bars-material-dark'	Navbar bg color in iOS theme
colors.title	string	'text-black dark:text-white'	Title text color
fontSizeIos	string	'text-navbar-ios'	Tailwind CSS class for font size in iOS theme
fontSizeMaterial	string	'text-navbar-material'	Tailwind CSS class for font size in Material theme
hairlines	boolean	true	Renders outer hairlines (borders) on iOS theme
innerClass	string		Additional class to add on Navbar's "inner" element
left	string		Content of the Navbar's "left" area
leftClass	string		Additional class to add on Navbar's "left" element
right	string		Content of the Navbar's "right" area
rightClass	string		Additional class to add on Navbar's "right" element
subnavbar	string		Content of the Navbar's "subnavbar" area
subnavbarClass	string		Additional class to add on Navbar's "subnavbar" element
subtitle	string		Content of the Navbar's "subtitle" area
subtitleClass	string		Additional class to add on Navbar's "subtitle" element
title	string		Content of the Navbar's "title" area
titleClass	string		Additional class to add on Navbar's "title" element
translucent	boolean	true	Makes Navbar background translucent (with `backdrop-filter: blur`) in iOS theme

Name	Description
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 Props

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

<Navbar title="My App">
  <NavbarBackLink slot="left" text="Back" onClick={() => history.back()} />
</Navbar>

Name	Type	Default	Description
component	string	'a'	Component's HTML Element
showText	boolean \| 'auto'	'auto'	Defines whether to show the link text. When 'auto', it hides link text for Material theme
text	string	'Back'	Text content of the back link
onClick	function(e)		Link click handler
onClick	function(e)		`click` event handler

NavbarBackLink Slots

Name	Description
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>

Navbar Svelte Component

Navbar Components

Navbar Props

Navbar Slots

NavbarBackLink Props

NavbarBackLink Slots

Examples