Navigation Bar
Bottom navigation for phones.
Preview
Loading...
import { HomeIcon, PersonIcon, GearIcon } from "@radix-ui/react-icons";
import { NavigationBar, NavigationBarItem } from "@/components/ui/NavigationBar";
export function NavigationBarDemo() {
return (
<div className="max-w-xl overflow-hidden rounded-sm border border-gray-6">
<NavigationBar>
<NavigationBarItem active>
<HomeIcon className="icon" />
<span>Home</span>
</NavigationBarItem>
<NavigationBarItem>
<PersonIcon className="icon" />
<span>People</span>
</NavigationBarItem>
<NavigationBarItem>
<GearIcon className="icon" />
<span>Settings</span>
</NavigationBarItem>
</NavigationBar>
</div>
);
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/navigation-barManual
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the NavigationBar component into your components/ui/NavigationBar.tsx file.
"use client";
import * as React from "react";
import { cn } from "@/utils/class-names";
function NavigationBar({
className,
label = "Primary",
...props
}: React.ComponentProps<"nav"> & { label?: string }) {
return (
<nav
aria-label={label}
data-slot="navigation-bar"
className={cn(
"flex items-stretch justify-around border-t border-gray-6 bg-gray-1",
className,
)}
{...props}
/>
);
}
function NavigationBarItem({
className,
active,
children,
...props
}: React.ComponentProps<"button"> & { active?: boolean }) {
return (
<button
type="button"
data-slot="navigation-bar-item"
aria-current={active ? "page" : undefined}
className={cn(
"inline-flex min-w-0 flex-1 flex-col items-center gap-0.5 px-0.5 py-0.5 text-gray-11 hover:bg-gray-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-8 aria-[current=page]:text-accent-11",
className,
)}
{...props}
>
{children}
</button>
);
}
export { NavigationBar, NavigationBarItem };