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

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-bars-ios-light dark:bg-bars-ios-dark'

Navbar bg color in iOS theme

colors.bgMaterialstring'bg-bars-material-light dark:bg-bars-material-dark'

Navbar bg color in iOS theme

colors.titlestring'text-black dark:text-white'

Title text color

componentstring'div'

Component's HTML Element

fontSizeIosstring'text-navbar-ios'

Tailwind CSS class for font size in iOS theme

fontSizeMaterialstring'text-navbar-material'

Tailwind CSS class for font size in Material theme

hairlinesbooleantrue

Renders outer hairlines (borders) on iOS theme

innerClassNamestring

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

leftReactNode

Content of the Navbar's "left" area

leftClassNamestring

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

rightReactNode

Content of the Navbar's "right" area

rightClassNamestring

Additional class to add on Navbar's "right" 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

translucentbooleantrue

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

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 from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Link,
Block,
} from 'tailwind-mobile/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 'tailwind-mobile/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>
);
}
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.