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 |
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 |
import React from 'react';import { Page, Navbar, NavbarBackLink, Link, Block } from 'konsta/react';export default function NavbarPage() {return (<Page><Navbartitle="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 Pagetitle and navigation elements.</p></Block></div></Page>);}
import React from 'react';import {Page,Navbar,NavbarBackLink,Block,Segmented,SegmentedButton,} from 'konsta/react';export default function SubnavbarPage() {return (<Page><Navbartitle="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 elementsinto Navbar, like Tab Links or Search Bar. It also remains visiblewhen Navbar hidden.</p></Block></div></Page>);}