Layouts

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.

Fullscreen

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.

The Navbar comes packed with a variety of components to make it stand out.

Button

Buttons be the real MVPs, man! They're all about gettin' stuff done, whether it’s slamming that form submit or hoppin' to another page.

Sheet

Slide out a panel for extra info, like pulling a drawer to find more tools, perfect for additional context without leaving the page..

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Intent

There are three types of intents: navbar, floating, and inset, each with distinct behaviors.

The default intent of the navbar is navbar. You can change it to floating or inset by setting the intent prop.

Fullscreen

Floating

The floating intent will have a border inside the navbar itself, the wrapper will have a padding to the content.

Fullscreen

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.

Fullscreen

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.

Common Usage

A typical approach is to wrap your content with the layout like this:

<AppLayout>
  {/* your main content */}
</AppLayout>

Inertia.js

If you're using Inertia.js, you can implement a persistent layout. Here's how it looks:

Home.layout = (page: React.ReactNode) => <AppLayout children={page} />

When using Inertia.js with Laravel, the layout, components, and pages files are typically located in the resources/js folder. All the examples below assume they are within this directory.

Loading source code...

Next.js

If you're using Next.js, there's no extra configuration needed. Simply create a page component and ensure it inherits the layout like this:

app/
├── app-navbar.tsx
├── layout.tsx
└── page.tsx

The logo is typically the first item in the navbar, usually representing the brand or company.

<Navbar>
  <Navbar.Nav>
    <Navbar.Logo href="#">
      <IconBrandApple className="size-5" />
    </Navbar.Logo>
    <Navbar.Section>
      <Navbar.Item href="#">Store</Navbar.Item>

Current

Highlight the current page in the navbar for better navigation clarity by setting the isCurrent prop to true.

<Navbar.Item isCurrent href="#"/>

Sticky

You also make the navbar sticky by setting the isSticky prop to true.

<Navbar isSticky />

Using Icons

If you'd like to use icons on the navbar items, that's no problem at all. The navbar is already designed and optimized to accommodate icons seamlessly. First of all, you need to install the justd-icons package.

Fullscreen

Disabled

Disable individual navbar items when needed.

Fullscreen

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. If you're not sure, you can always see the real example here at starter kit inertia.js.

import { usePage } from '@inertiajs/react';
 
export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Navbar>) {
  const page = usePage();
  const [isOpen, setIsOpen] = 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. If you're not sure, you can always see the real example here at starter kit next.js. or see live example here.

import { usePathname } from "next/navigation"
 
export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Navbar>) {
  const pathname = usePathname();
  const [isOpen, setIsOpen] = useState(false);
 
  React.useEffect(() => setIsOpen(false), [pathname]);
 
  return (
    <Navbar isOpen={isOpen} onOpenChange={setIsOpen} {...props}>
Number FieldDisclosure Group | Accordion