Skip to content

Conversation

@mdo
Copy link
Member

@mdo mdo commented Jan 27, 2026

Overhauls navbar component and adds a new nav overflow plugin and component. Also as part of this is a new resizable container to show responsive behaviors inline in examples. This also means navbars are now using container queries instead of viewport queries. Maybe something to update in other places.

This was still WIP, so consider it a checkpoint. Still lots to do. Long story short, we have overflowing nav behavior now, navbars should be getting simpler with fewer options on responsiveness (defaults to offcanvas instead of expand/collapse), etc.

  1. New Nav Overflow plugin (js/src/nav-overflow.js, scss/_nav-overflow.scss)

    • Adds a JavaScript plugin to handle nav items that overflow their container
    • Automatically collapses extra items into a "more" dropdown when space is limited
    • New documentation page at components/nav-overflow.mdx
  2. Navbar SCSS refactor (scss/_navbar.scss)

    • Simplified CSS variables (removed embedded SVG toggler icons)
    • Updated padding and sizing defaults (smaller toggler padding, reduced navbar-padding-y)
    • Added container-type: inline-size for container query support
    • Cleaned up deprecated Sass variables and comments
    • .navbar-nav now requires .nav
  3. Offcanvas updates (scss/_offcanvas.scss)

    • Adjustments to work better with the updated navbar
  4. New docs components

    • NavbarPlacementPlayground.astro - Interactive playground for navbar placement options
    • ResizableExample.astro - Resizable container for demonstrating responsive behavior
  5. Docs updates

    • Rewrote/reorganized navbar.mdx documentation (~780 lines changed)
    • Updated all navbar-related examples (album, carousel, cheatsheet, navbars, etc.)
    • Minor dropdown and offcanvas docs tweaks

@mdo mdo added this to v6.0.0 Jan 27, 2026
@mdo mdo requested a review from a team as a code owner January 27, 2026 21:36
@mdo mdo added the js label Jan 27, 2026
@mdo mdo requested a review from a team as a code owner January 27, 2026 21:36
@github-project-automation github-project-automation bot moved this to Inbox in v6.0.0 Jan 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Inbox

Development

Successfully merging this pull request may close these issues.

2 participants