Basic
A navbar provides a variety of actions or options for users to select.
Installation
Creating a Navbar
You can certainly create a single component to handle the entire navbar. However, in this guide, I'll show you how to build a navbar using modern techniques common in frameworks like Next.js, Inertia.js, and others.
App Navbar
When designing a layout, a navbar that links to all your pages is essential. Let's start with the simplest approach.
Using the Layout
There are several ways to use the layout, depending on your framework. Or, if you're not using any framework, you can simply apply the layout component.
Variant
There are three types of variants: navbar
, float
, and inset
, each with distinct behaviors.
Navbar
The default variant of the navbar is navbar
. You can change it to float
or inset
by setting the variant
prop.
Float
The float variant will have a border inside the navbar itself, the wrapper will have a padding to the content.
Inset
The inset one will have the padding to inset main content. You can of course see what's going on the demo, but you can also see the live example here.
Sticky
You also make the navbar sticky by setting the isSticky
prop to true
.
<Navbar isSticky />
Controlled
On mobile devices, the navbar is hidden by default. You can open it using Navbar.Trigger
, but there are times when you might want to manage its state by clicking one of the links within the navbar. You can achieve this because it shares the sheet properties, specifically isOpen
and onOpenChange
. There are multiple ways to control the state, but the simplest method is to listen for path changes and set isOpen
to true
or false
accordingly.
Inertia.js
When you are using inertia.js, you can listen the path by using usePage
hooks.
import { usePage } from '@inertiajs/react';
export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Navbar>) {
const page = usePage();
const [isOpen, setIsOpen] = React.useState(false);
React.useEffect(() => setIsOpen(false), [page.url]);
return (
<Navbar isOpen={isOpen} onOpenChange={setIsOpen} {...props}/>
)
}
Next.js
On next.js, you can listen the path by using usePathname
hooks.
import { usePathname } from "next/navigation"
export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Navbar>) {
const pathname = usePathname();
const [isOpen, setIsOpen] = React.useState(false);
React.useEffect(() => setIsOpen(false), [pathname]);
return (
<Navbar isOpen={isOpen} onOpenChange={setIsOpen} {...props}>
{/* Rest of your code */}
</Navbar>
)
}