Navbar
A navbar is a component that helps you organize your content and navigation in a consistent way.
Installation
CLI
Manual
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.
navbar basic
View
Code
Float
The float variant will have a border inside the navbar itself, the wrapper will have a padding to the content.
navbar float
View
Code
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.
navbar inset
View
Code
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>
)
}