Overview
This issue proposes enhancements to the Navbar component to improve its flexibility, responsiveness, and visual customization options.
Proposed Features
2. Center Section
Intent: Provide a dedicated section for centered content within the navbar, enabling layouts where navigation items or branding are positioned in the middle.
Possible API direction:
<Navbar>
<Navbar.Start>...</Navbar.Start>
<Navbar.Center>...</Navbar.Center>
<Navbar.End>...</Navbar.End>
</Navbar>
3. Visual Variants
Intent: Allow different visual styles for the navbar to support various design contexts such as landing pages with transparent headers, modern glassmorphism effects, or minimal bordered styles.
Possible API direction:
<Navbar variant="solid" /> // Default with background
<Navbar variant="transparent" /> // No background color
<Navbar variant="blur" /> // Backdrop blur effect
<Navbar variant="bordered" /> // Border only, no shadow
4. Size Variants
Intent: Provide predefined size options to control the navbar's height and spacing, allowing compact navbars for dense UIs or spacious ones for marketing pages.
Possible API direction:
<Navbar size="sm" /> // Compact
<Navbar size="md" /> // Default
<Navbar size="lg" /> // Spacious
5. Hide on Scroll
Intent: Support a behavior where the navbar hides when the user scrolls down and reappears when scrolling up. This maximizes viewport space for content while keeping navigation accessible.
Possible API direction:
Improvements
2. Add size variants
No way to create compact or large navbars. Add CVA size variants (sm, md, lg) affecting min-height and padding.
3. Make gap configurable on Start/End sections
gap={5} is hardcoded in NavbarStart and NavbarEnd. Should accept a gap prop with default of 5.
4. Review conditional role="group" logic
role="group" is only added when aria-label is provided. Consider whether this should be independent of aria-label presence.
5. Add display: flex to .container class
Container uses align-items: center but doesn't declare display: flex — relies on inherited layout which is fragile.
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
Files
packages/raystack/raystack/components/navbar/
Notes
- The API examples above are suggestions for discussion and not final designs
- Each feature can be implemented incrementally
- Accessibility considerations should be maintained across all enhancements
Overview
This issue proposes enhancements to the Navbar component to improve its flexibility, responsiveness, and visual customization options.
Proposed Features
2. Center Section
Intent: Provide a dedicated section for centered content within the navbar, enabling layouts where navigation items or branding are positioned in the middle.
Possible API direction:
3. Visual Variants
Intent: Allow different visual styles for the navbar to support various design contexts such as landing pages with transparent headers, modern glassmorphism effects, or minimal bordered styles.
Possible API direction:
4. Size Variants
Intent: Provide predefined size options to control the navbar's height and spacing, allowing compact navbars for dense UIs or spacious ones for marketing pages.
Possible API direction:
5. Hide on Scroll
Intent: Support a behavior where the navbar hides when the user scrolls down and reappears when scrolling up. This maximizes viewport space for content while keeping navigation accessible.
Possible API direction:
Improvements
2. Add size variants
No way to create compact or large navbars. Add CVA size variants (sm, md, lg) affecting min-height and padding.
3. Make gap configurable on Start/End sections
gap={5}is hardcoded in NavbarStart and NavbarEnd. Should accept agapprop with default of 5.4. Review conditional
role="group"logicrole="group"is only added whenaria-labelis provided. Consider whether this should be independent of aria-label presence.5. Add
display: flexto.containerclassContainer uses
align-items: centerbut doesn't declaredisplay: flex— relies on inherited layout which is fragile.Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
Files
packages/raystack/raystack/components/navbar/Notes