Skip to content
GitLab

v4: Flexbox navbar

Merged Mark Otto requested to merge v4-tabbar into v4-dev

Following up on #21389, this PR is a WIP for adding the flexbox navbar. It started off as a late night experiment again with display: table—which was pretty awesome mind you—and got me thinking heavily about flex options. Given we're going all flex now, this approach gets even easier.

Still a ton to do, but wanted to open this sooner than later.

Done

  • Fixes #18875 (closed) and fixes #18875 (closed) with move to flexbox-based approach.
  • Fixes #20937 (closed) by closing out all the below issues.
  • Moves .navbar-toggleable-* from the .collapse to the .navbar, making it even easier to toggle content as needed.
  • Fixes #21364 (closed) by updating all examples to use new navbars.
  • Revamp navbar docs to push responsive implementation from the get-go instead of at the end. Also adds new examples.
  • Fixes #21361 (closed) by changing how togglers works. Alignment has changed and the icon is now a separate element, .navbar-toggler-icon, within .navbar-toggler.
  • Adds left and right absolutely positioned toggler variations.
  • Fixes #20766 (closed) with ability to center navbar links (with example in docs)
  • Fixes #18115 (closed): Renamed .navbar-dark to .navbar-inverse to match nomenclature of .bg-inverse and .card-inverse. .navbar-light is still the default class.

Todo