Tabs

Simple responsive horizontal navigation tabs, with different styles

Tabs

The Astral tabs are a straightforward navigation component that come in a variety of versions. They only require the following structure:

  • a tabs container
  • a <ul> HTML element
  • a list of <li> HTML element
  • <a> HTML anchor elements for each link

The default tabs style has a single border at the bottom.

Alignment

To align Astral tabs list, use the justify-content-center or justify-content-end modifier on the ul

Icons

You can use any of the Font Awesome icons.
On this page