[Navbar] Enhance with responsive, layout, and styling capabilities

[ravisuhag]

Overview

This issue proposes enhancements to the Navbar component to improve its flexibility, responsiveness, and visual customization options.

---

Proposed Features

1. Mobile Responsive Support

Intent: Enable the navbar to adapt gracefully to mobile viewports, allowing navigation items to collapse into a toggleable menu on smaller screens.

This is essential for building responsive applications without requiring custom implementations for mobile navigation.

---

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:

<Navbar hideOnScroll />

---

Improvements

1. Replace hardcoded min-height: 48px with design token

Should use var(--rs-space-11) instead of hardcoded 48px.

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.

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

[paanSinghCoder]

Scope:

1. Skip responsive behavior for now.
2. Add a boolean prop to toggle bottom shadow.
3. No variants (no outline, no size); rely on className for custom styling.
4. Implement hide on vertical scroll. Rename the hideOnScroll prop to a better name.
5. Revisit whether to keep the Navbar.center layout option.
6. Make start/center/end layout extend Flex (or equivalent) props if they don’t already.
7. Default role should be navigation and fix Improvements - 4.
8. Fix Improvements - 5.