Tutorials References Menu

W3.CSS Bars


London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo

Horizontal Bars

Horizontal bars are common web design elements:

London
Paris
Tokyo

The w3-bar class is used to style an horizontal bar:

Example

<div class="w3-bar w3-green">
  <div class="w3-bar-item">London</div>
  <div class="w3-bar-item">Paris</div>
  <div class="w3-bar-item">Tokyo</div>
</div>

Try It Yourself »

The purpose of the w3-bar-item class is to provide correct spacing, padding, and positioning.


Vertical Bars

Vertical bars (sidebars) are also common in web design:

London
Paris
Tokyo

The w3-bar-block class is used to style a vertical bar:

Example

<div class="w3-bar-block w3-green">
  <div class="w3-bar-item">London</div>
  <div class="w3-bar-item">Paris</div>
  <div class="w3-bar-item">Tokyo</div>
</div>

Try It Yourself »



Bar Colors

You can use any color to style a bar:

London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo

Example

<div class="w3-bar w3-black">
  <div class="w3-bar-item">London</div>
  <div class="w3-bar-item">Paris</div>
  <div class="w3-bar-item">Tokyo</div>
</div>

Try It Yourself »


Hover Colors

You can use any hover color to style a bar:

Mouse over the bar items to see the effect:

London
Paris
Tokyo

London
Paris
Tokyo

Example

<div class="w3-bar w3-black">
  <div class="w3-bar-item w3-hover-red">London</div>
  <div class="w3-bar-item w3-hover-green">Paris</div>
  <div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>

Try It Yourself »


Bar Links

Providing navigation is a typical use for bars:


Example

<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-hover-green">London</a>
  <a href="#" class="w3-bar-item w3-hover-green">Paris</a>
  <a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>

Try It Yourself »


Bar Buttons

The w3-button class is perfect for styling links in a bar.

Mouse over the bar items to see the effect:

London
Paris
Tokyo

London
Paris
Tokyo

Example

<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button">London</a>
  <a href="#" class="w3-bar-item w3-button">Paris</a>
  <a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>

Try It Yourself »


Responsive Bar

The w3-mobile class is perfect for making bar items responsive.

Resize the window to see the effect:

London
Paris
Tokyo

Example

<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>

Try It Yourself »


Right-Aligned Bar Items

The w3-right class is perfect for making bar items right-aligned:

London
Paris
Tokyo

Example

<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button">London</a>
  <a href="#" class="w3-bar-item w3-button">Paris</a>
  <a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>

Try It Yourself »