HorizontalMenu

v0.1.5

Um componente de menu horizontal com suporte para dropdowns, ícones, navegação por teclado e acessibilidade completa. Perfeito para barras de navegação superiores.

✓

Layout Horizontal

Menu otimizado para navegação horizontal em barras superiores

✓

Dropdowns

Suporte para subitens com dropdowns elegantes

✓

Navegação por Teclado

Suporte completo ao teclado (Tab, setas, Enter, Escape)

✓

Acessível

Atributos ARIA e suporte a leitores de tela

Instalação

npm install molde-ui
# or
pnpm add molde-ui
# or
yarn add molde-ui

Exemplo de Uso

import { HorizontalMenu } from 'molde-ui';
import 'molde-ui/styles';

const menuItems = [
  { 
    label: 'Home', 
    path: '/home',
    icon: <HomeIcon />
  },
  { 
    label: 'Products', 
    path: '/products',
    items: [
      { label: 'All Products', path: '/products/all' },
      { label: 'Categories', path: '/products/categories' }
    ]
  },
  { 
    label: 'About', 
    path: '/about'
  }
];

function App() {
  const [activePath, setActivePath] = useState('/home');
  
  return (
    <HorizontalMenu
      items={menuItems}
      activePath={activePath}
      onItemClick={(path) => setActivePath(path)}
    />
  );
}

Demonstração ao Vivo

Menu horizontal com suporte para dropdowns. Passe o mouse sobre "Products" para ver o dropdown.

Caminho Ativo: /home

Propriedades

Propriedade	Tipo	Padrão	Descrição
items	HorizontalMenuItemType[]	-	Array de itens do menu
activePath	string	''	Caminho do item de menu atualmente ativo
onItemClick	(path: string, item: HorizontalMenuItemType) => void	-	Callback quando um item é clicado
size	'sm' \| 'md' \| 'lg'	'md'	Tamanho dos itens do menu
variant	'default' \| 'compact'	'default'	Estilo da variante
className	string	''	Classes CSS adicionais