Repository navigation
Component: more NavBar variants (centered, floating, mega menu, sidebar, minimal, search) #47
Description
Summary
NavBar is the only navigation component. Add more navbar variants so users can pick a layout without restyling the base one. Each variant is a separate component and a separate PR; comment below to claim one.
Proposed variants
| Component | Description |
|---|---|
NavBarCentered |
Logo centered, links split left/right, language selector and CTA at the end. |
NavBarFloating |
Detached, rounded "pill" bar that floats over content with a blurred backdrop, and shrinks on scroll. |
NavBarMega |
Links can open a mega-menu panel with grouped sub-links and descriptions. |
NavBarSidebar |
Vertical side navigation for docs and dashboards, collapsible to icons, with the language selector in the footer. |
NavBarMinimal |
Logo plus language selector only, using LanguageSwitcherPill as the inline locale control. |
NavBarWithSearch |
Base bar plus a search field / command-palette trigger (⌘K). |
Requirements (every variant)
- Same conventions as
NavBar:value/defaultValue/onValueChangefor the locale.locales: Locale[]from./types.linkComponentfor router links.- Ref forwarding and passthrough of extra props to the root element.
- Locale labels and flags from the shared
./locale-datamodule. No local copies. - Language menus use
useListboxNavigation(feat(a11y): keyboard navigation for listbox popups (LanguageSwitcher, PhoneInput, NavBar) #44) for keyboard support. - RTL:
dirderived from the active locale, logical utilities only (start/end,ms/me,text-start). See NavBar: layout does not switch to RTL for RTL locales #45. - Responsive with a mobile menu at narrow widths; dark mode.
- Registry entry with correct
registryDependencies(npm run test:registrymust pass), a barrel export, a docs page with Installation / Usage / Props / Examples, a live demo, and tests. - Docs preview tall enough for the variant's popups (see Docs: NavBar preview is too short for its dropdown and mobile menu #46).
Acceptance per PR
- One variant per PR, linked to this issue.
-
lint,format:check,typecheck,test,build:lib,test:packpass. - Screenshots: LTR and RTL, desktop and ~390px, light and dark.
Activity