Scroll nav

ScrollNav is a horizontally scrollable navigation bar based on Bootstrap's nav-scroller pattern. Arrow buttons appear automatically when the items overflow the container width.

Example

<ScrollNav aria-label="Scrollable sections">
  <NavLink
    aria-current="page"
    className="text-nowrap active"
    href="#example"
  >
    Dashboard
  </NavLink>
  <NavLink
    className="text-nowrap"
    href="#example"
  >
    Friends
  </NavLink>
  <NavLink
    className="text-nowrap"
    href="#example"
  >
    Explore
  </NavLink>
  <NavLink
    className="text-nowrap"
    href="#example"
  >
    Suggestions
  </NavLink>
  <NavLink
    className="text-nowrap"
    href="#example"
  >
    Messages
  </NavLink>
  <NavLink
    className="text-nowrap"
    href="#example"
  >
    Notifications
  </NavLink>
  <NavLink
    className="text-nowrap"
    href="#example"
  >
    Profile
  </NavLink>
  <NavLink
    className="text-nowrap"
    href="#example"
  >
    Settings
  </NavLink>
  <NavLink
    className="text-nowrap"
    href="#example"
  >
    Help
  </NavLink>
  <NavLink
    className="text-nowrap"
    href="#example"
  >
    Logout
  </NavLink>
</ScrollNav>

Behavior

The component tracks scroll position and container size with a ResizeObserver, showing a left or right caret button only when more content is available in that direction. Each click scrolls by 80% of the visible width with smooth scrolling.