BIRHAUS v3.0 Radical Minimalist Navigation Components - FourThreeOneNav with glass morphism implementing 4-3-1 cognitive rule
npm install @birhaus/navigationBIRHAUS Navigation Components - FourThreeOneNav implementing the 4-3-1 cognitive rule.
``bash`
npm install @birhaus/navigation
- react >= 18.0.0react-dom >= 18.0.0
-
`tsx
import { FourThreeOneNav, ContextualActions, SearchAndCommandPalette } from '@birhaus/navigation'
function AppLayout() {
const navigationItems = [
{ labelEs: 'Inicio', labelEn: 'Home', href: '/' },
{ labelEs: 'Estudiantes', labelEn: 'Students', href: '/students' },
{ labelEs: 'Cursos', labelEn: 'Courses', href: '/courses' },
{ labelEs: 'Reportes', labelEn: 'Reports', href: '/reports' },
] // Max 4 items (4-3-1 rule)
const contextualActions = [
{ labelEs: 'Exportar', labelEn: 'Export', onClick: handleExport },
{ labelEs: 'Filtrar', labelEn: 'Filter', onClick: handleFilter },
{ labelEs: 'Buscar', labelEn: 'Search', onClick: handleSearch },
] // Max 3 actions (4-3-1 rule)
return (
contextualActions={contextualActions}
primaryAction={{
labelEs: 'Crear Nuevo',
labelEn: 'Create New',
onClick: handleCreate
}} // Only 1 primary action (4-3-1 rule)
logo={
enableCognitiveLoadWarnings={true}
/>
)
}
`
`tsx
import { MobileNavigation, MobileMenuButton } from '@birhaus/navigation'
function MobileLayout() {
return (
Features
- 4-3-1 Cognitive Rule: Enforces max 4 navigation items, 3 contextual actions, 1 primary action
- Miller's Law: Prevents cognitive overload with item limits
- Spanish-first: Primary labels in Spanish, English fallbacks
- Mobile Responsive: Automatic mobile navigation patterns
- Command Palette: Integrated search and command system
- Cognitive Load Warnings: Alerts when exceeding BIRHAUS limits
Components
-
FourThreeOneNav - Main navigation with cognitive rule enforcement
- DesktopNavigation - Desktop-specific navigation layout
- MobileNavigation - Mobile navigation drawer
- MobileMenuButton - Hamburger menu button
- ContextualActions - Action buttons with 3-item limit
- LogoSection - Logo and branding area
- SearchAndCommandPalette` - Integrated search functionality- Cognitive Load Reduction: Visual warnings when limits exceeded
- Undo over Confirm: Actions are undoable, not confirmed
- Progressive Disclosure: Show navigation contextually
- Accessibility: Semantic HTML, keyboard navigation, screen reader support
MIT