Navbar React Component

Navbar Components
Navbar Props
NavbarBackLink Props
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
bgClassName	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
component	string	'div'	Component's HTML Element
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
innerClassName	string		Additional class to add on Navbar's "inner" element
left	ReactNode		Content of the Navbar's "left" area
leftClassName	string		Additional class to add on Navbar's "left" element
right	ReactNode		Content of the Navbar's "right" area
rightClassName	string		Additional class to add on Navbar's "right" element
subnavbar	ReactNode		Content of the Navbar's "subnavbar" area
subnavbarClassName	string		Additional class to add on Navbar's "subnavbar" element
subtitle	ReactNode		Content of the Navbar's "subtitle" area
subtitleClassName	string		Additional class to add on Navbar's "subtitle" element
title	ReactNode		Content of the Navbar's "title" area
titleClassName	string		Additional class to add on Navbar's "title" element
translucent	boolean	true	Makes Navbar background translucent (with `backdrop-filter: blur`) in iOS theme

NavbarBackLink Props

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

<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	ReactNode	'Back'	Text content of the back link
onClick	function(e)		Link click handler

Examples

Navbar.jsx

import React from 'react';
import { Page, Navbar, NavbarBackLink, Link, Block } from 'konsta/react';

export default function NavbarPage() {
  return (
    <Page>
      <Navbar
        title="Navbar"
        subtitle="Subtitle"
        className="top-0 sticky"
        right={<Link navbar>Right</Link>}
      />
      <div className="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.jsx

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  Segmented,
  SegmentedButton,
} from 'konsta/react';

export default function SubnavbarPage() {
  return (
    <Page>
      <Navbar
        title="Subnavbar"
        subnavbar={
          <Segmented strong>
            <SegmentedButton small strong active>
              Button
            </SegmentedButton>
            <SegmentedButton small strong>
              Button
            </SegmentedButton>
            <SegmentedButton small strong>
              Button
            </SegmentedButton>
          </Segmented>
        }
      />
      <div className="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 React Component

Navbar Components

Navbar Props

NavbarBackLink Props

Examples