Navbar

A navbar is a component that helps you organize your content and navigation in a consistent way.

Basic

A navbar provides a variety of actions or options for users to select.

Installation

In the terminal, run the following command to begin:
npx hq-kit add navbar

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.

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>
  )
}
SidebarAvatar