Skip to content

Instantly share code, notes, and snippets.

@Artistan

Artistan/How to nav.md

Created July 9, 2018 19:06
Show Gist options
  • Save Artistan/aba0c7c4b93342122835e43a9431e31d to your computer and use it in GitHub Desktop.
Save Artistan/aba0c7c4b93342122835e43a9431e31d to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 4.1 Navs
Raw
How to nav.md

Bootstrap 4.1

Using data attributes

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab", data-toggle="pill", or data-toggle="list" on an element. Use these data attributes on .nav or .list-group.

Required data attributes

Toggle elements

  • toggle elements must be contained in a .nav or .list-group element
  • data-toggle must be set to tab, pill, or list
  • data-target or href defined with a jQuery selector for the target container to toggle
  • if the clicked element is .active or .disabled, no show event will trigger

Toggle targets

  • must be hidden elements
  • must show with addition of .active class
  • unique targeting, usually an id for the data-target|href targetting
  • warning: only one item will be toggled with tabs, use collapse for toggling multiple items.

default classes for tabs are .tab-content with nested .tab-pane elements

Optional data attributes

Toggle elements

  • role="tab" - this will cause teh aria-selected to toggle between true and false
  • aria-selected="false" - boolean, if tab is active this should be true
  • aria-controls - id of the target container

Toggle targets

  • role="tabpanel" - definition aria accessibility
  • aria-labelledby - id of the toggle controller / label
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment