Navigation
Componente de navegazione responsivo com ícones e configuração flexível. Ideal para menus principais, barras laterais e navegação horizontal.
Navegação Padrão
Usando os items padrão definidos no componente:
Uso Básico
import { Navigation } from "@/registry/ui/Navigation";
<Navigation />Navegação Customizada
Com items personalizados para diferentes seções da aplicação:
Items Customizados
import { Navigation } from "@/registry/ui/Navigation";
import { Home, User, Settings, FileText, Calendar, Mail } from "lucide-react";
const customItems = [
{ label: "Início", href: "/", icon: Home },
{ label: "Perfil", href: "/profile", icon: User },
{ label: "Relatórios", href: "/reports", icon: FileText },
{ label: "Agenda", href: "/calendar", icon: Calendar },
{ label: "Contato", href: "/contact", icon: Mail },
{ label: "Configuração", href: "/settings", icon: Settings },
];
<Navigation items={customItems} />Variações de Layout
O componente se adapta automaticamente para dispositivos móveis e desktop:
Layout Desktop (tela grande)
Layout Mobile (responsivo)
Interface e Props
NavigationItem Interface
interface NavigationItem {
label: string;
href: string;
icon: React.ComponentType<any>;
}
interface NavigationProps {
items?: NavigationItem[];
className?: string;
}Props Disponíveis
items- Array de objetos NavigationItem (opcional)className- Classes CSS adicionais (opcional)
Características
- • Layout responsivo automático
- • Suporte a temas (claro/escuro/contraste)
- • Ícones de lucide-react
- • Items padrão configuráveis
- • Navegação com Next.js Link