🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Navbar React 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
bgClassNamestring

Additional class to add on Navbar's "background" element

centerTitlebooleanundefined

Makes centered navbar title. If not specified then it set it to center in iOS theme

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-ios-light-surface-2 dark:bg-ios-dark-surface-2'
colors.bgMaterialstring'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.textIosstring'text-black dark:text-white'
colors.textMaterialstring'text-md-light-on-surface dark:text-md-dark-on-surface'
componentstring'div'

Component's HTML Element

fontSizeIosstring'text-[17px]'

Tailwind CSS class for font size in iOS theme

fontSizeMaterialstring'text-[16px]'

Tailwind CSS class for font size in Material theme

innerClassNamestring

Additional class to add on Navbar's "inner" element

largebooleanfalse

Renders large-sized navbar with extra row for large-sized title which becomes usual size on scroll

leftReactNode

Content of the Navbar's "left" area

leftClassNamestring

Additional class to add on Navbar's "left" element

mediumbooleanfalse

Renders medium-sized navbar with extra row for medium-sized title which becomes usual size on scroll

outlinebooleanundefined

Renders outer hairlines (borders). If not specified, will be enabled for iOS theme

rightReactNode

Content of the Navbar's "right" area

rightClassNamestring

Additional class to add on Navbar's "right" element

scrollElanyundefined

Element required for correct "collapse" functionality for medium/large/transparent Navbar. If not specified, it will use Navbar's parent element

subnavbarReactNode

Content of the Navbar's "subnavbar" area

subnavbarClassNamestring

Additional class to add on Navbar's "subnavbar" element

subtitleReactNode

Content of the Navbar's "subtitle" area

subtitleClassNamestring

Additional class to add on Navbar's "subtitle" element

titleReactNode

Content of the Navbar's "title" area

titleClassNamestring

Additional class to add on Navbar's "title" element

titleFontSizeIosstring'text-[17px]'

Tailwind CSS class for navbar title font size in iOS theme

titleFontSizeMaterialstring'text-[22px]'

Tailwind CSS class for navbar title font size in Material theme

titleLargeFontSizeIosstring'text-[34px]'

Tailwind CSS class for large-sized navbar title font size in iOS theme

titleLargeFontSizeMaterialstring'text-[28px]'

Tailwind CSS class for large-sized navbar title font size in Material theme

titleMediumFontSizeIosstring'text-[24px]'

Tailwind CSS class for medium-sized navbar title font size in iOS theme

titleMediumFontSizeMaterialstring'text-[24px]'

Tailwind CSS class for medium-sized navbar title font size in Material theme

translucentbooleantrue

Makes Navbar background translucent (with backdrop-filter: blur) in iOS theme

transparentbooleanfalse

Renders transparent navbar which becomes opaque on scroll

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

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

textReactNode'Back'

Text content of the back link

onClickfunction(e)

Link click handler

Examples

Navbar.jsx
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>
);
}
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 strongIos outlineIos>
<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.
2022 © Konsta UI by nolimits4web.