Tabler React 2 Docs
Navbar
Navbar
Navbars are used to display navigation links. They can be used to display a list of links, or a list of dropdowns.
Signature
import { Navbar } from "tabler-react-2";
<Navbar {...props} />;Props
Basic Usage
The Navbar component is used to display a navbar.
<Navbar items={[ { type: "link", href: "#", text: "Link 1", }, { type: "link", href: "#", text: "Link 2", disabled: true, }, { type: "dropdown", text: "Drop 1", items: [ { type: "link", href: "#", text: "Link 1", }, { type: "link", href: "#", text: "Link 2", }, ], }, ]}/>Tabs
Setting the type prop to tabs will display the navbar as tabs.
<Navbar type="tabs" items={[ { type: "link", href: "#", text: "Link 1", }, { type: "link", href: "#", text: "Link 2", }, { type: "link", disabled: true, href: "#", text: "Disabled", }, ]}/>Pills
Setting the type prop to pills will display the navbar as pills.
<Navbar type="pills" items={[ { type: "link", href: "#", text: "Link 1", }, { type: "link", href: "#", text: "Link 2", }, { type: "link", disabled: true, href: "#", text: "Disabled", }, ]}/>Underline
Setting the type prop to underline will display the navbar as underline.
<Navbar type="underline" items={[ { type: "link", href: "#", text: "Link 1", }, { type: "link", href: "#", text: "Link 2", }, { type: "link", href: "#", text: "Link 3", }, ]}/>