HQ UI

Navbar

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

Installation

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

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.

navbar basic

Float

The float variant will have a border inside the navbar itself, the wrapper will have a padding to the content.

navbar float

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

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