Navbar

Navbar Props

Name	Type	Default	Description
bgClass	string		Additional class to add on Navbar's "background" element
centerTitle	boolean	undefined	Makes centered navbar title. If not specified then it set it to center in iOS theme
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-ios-light-surface-2 dark:bg-ios-dark-surface-2'
colors.bgMaterial	string	'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.textIos	string	'text-black dark:text-white'
colors.textMaterial	string	'text-md-light-on-surface dark:text-md-dark-on-surface'
component	string	'div'	Component's HTML Element
fontSizeIos	string	'text-[17px]'	Tailwind CSS class for font size in iOS theme
fontSizeMaterial	string	'text-[16px]'	Tailwind CSS class for font size in Material theme
innerClass	string		Additional class to add on Navbar's "inner" element
large	boolean	false	Renders large-sized navbar with extra row for large-sized title which becomes usual size on scroll
left	string		Content of the Navbar's "left" area
leftClass	string		Additional class to add on Navbar's "left" element
medium	boolean	false	Renders medium-sized navbar with extra row for medium-sized title which becomes usual size on scroll
outline	boolean	undefined	Renders outer hairlines (borders). If not specified, will be enabled for iOS theme
right	string		Content of the Navbar's "right" area
rightClass	string		Additional class to add on Navbar's "right" element
scrollEl	any	undefined	Element required for correct "collapse" functionality for medium/large/transparent Navbar. If not specified, it will use Navbar's parent 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
titleFontSizeIos	string	'text-[17px]'	Tailwind CSS class for navbar title font size in iOS theme
titleFontSizeMaterial	string	'text-[22px]'	Tailwind CSS class for navbar title font size in Material theme
titleLargeFontSizeIos	string	'text-[34px]'	Tailwind CSS class for large-sized navbar title font size in iOS theme
titleLargeFontSizeMaterial	string	'text-[28px]'	Tailwind CSS class for large-sized navbar title font size in Material theme
titleMediumFontSizeIos	string	'text-[24px]'	Tailwind CSS class for medium-sized navbar title font size in iOS theme
titleMediumFontSizeMaterial	string	'text-[24px]'	Tailwind CSS class for medium-sized navbar title font size in Material theme
translucent	boolean	true	Makes Navbar background translucent (with backdrop-filter: blur) in iOS theme
transparent	boolean	false	Renders transparent navbar which becomes opaque on scroll

Navbar Slots

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:

Vue

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

React

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

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

NavbarBackLink Slots

Name	Description
text	Text content of the back link

Examples

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>

React

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Link,
  Block,
  BlockTitle,
  BlockHeader,
  List,
  ListItem,
  Radio,
  Toggle,
} from 'konsta/react';

export default function NavbarPage() {
  const [size, setSize] = useState('Default');
  const [isTransparent, setIsTransparent] = useState(false);
  return (
    <Page>
      <Navbar
        title="Navbar"
        subtitle="Subtitle"
        className="top-0 sticky"
        medium={size === 'Medium'}
        large={size === 'Large'}
        transparent={isTransparent}
        right={<Link navbar>Right</Link>}
      />
      <div className="relative">
        <Block strong inset>
          <p>
            Navbar is a fixed area at the top of a screen that contains Page
            title and navigation elements.
          </p>
        </Block>

        <BlockTitle>Size</BlockTitle>
        <BlockHeader>
          Medium and Large will collapse to usual size on page scroll
        </BlockHeader>
        <List strong inset>
          {['Default', 'Medium', 'Large'].map((v) => (
            <ListItem
              key={v}
              label
              title={v}
              after={
                <Radio
                  component="div"
                  value={v}
                  checked={size === v}
                  onChange={() => setSize(v)}
                />
              }
            />
          ))}
        </List>

        <BlockTitle>Transparent</BlockTitle>

        <BlockHeader>
          When navbar is transparent, its title and background will become
          visible on page scroll
        </BlockHeader>
        <List strong inset>
          <ListItem
            label
            title="Transparent"
            after={
              <Toggle
                component="div"
                checked={isTransparent === true}
                onChange={() => setIsTransparent(!isTransparent)}
              />
            }
          />
        </List>

        <Block strong inset className="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>
        </Block>
      </div>
    </Page>
  );
}