Top Bar

A great way to display complex navigation on small, medium, or large screens.

Build With HTML Classes

The top bar is a pretty complex piece of magical UI goodness. We rely on many presentational classes to define its look and feel, and there's a lot happening in the JS. The top bar is hoverable by default, but you can change it use click events instead by adding data-options="is_hover: false" to the <nav> element.


<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
  </ul>
  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Nav Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button with Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>
    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

Sonos Bar

To get the Sonos Bar in your template, some specialized markup is required. This is the pattern in its most basic implementation.

<nav data-topbar data-options="is_hover: false; back_text: <span class='icon-left-dir'></span> Back" class="top-bar sonos-bar">
  <ul class="title-area">
    <li class="name">
      <h1><a>Sonos</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="left">
      <li class="has-dropdown"><a>What Is Sonos</a>
        <ul class="dropdown">
          <li class="sep hide-for-medium-down"></li>
          <li><a>System</a></li>
          <li><a>Music</a></li>
          <li><a>App</a></li>
          <li class="sep hide-for-medium-down"></li>
        </ul>
      </li>
      <li class="has-dropdown"><a>Products Overview</a>
        <ul class="dropdown">
          <li class="sep hide-for-medium-down"></li>
          <li><a>Speakers</a></li>
          <li><a>Home Theater</a></li>
          <li><a>Components</a></li>
          <li class="sep hide-for-medium-down"></li>
        </ul>
      </li>
      <li class="has-dropdown"><a>Shop</a>
        <ul class="dropdown">
          <li class="sep hide-for-medium-down"></li>
          <li><a>All Products</a></li>
          <li class="label">
            <label>Wireless Speakers</label>
          </li>
          <li><a>PLAY:1</a></li>
          <li><a>PLAY:3</a></li>
          <li><a>PLAY:5</a></li>
          <li class="label">
            <label>Wireless Home Theater</label>
          </li>
          <li><a>PLAYBAR</a></li>
          <li><a>SUB</a></li>
          <li class="label">
            <label>Add Existing Equipment</label>
          </li>
          <li><a>CONNECT:AMP</a></li>
          <li><a>CONNECT</a></li>
          <li class="sep hide-for-medium-down"></li>
        </ul>
      </li>
      <li><a>Support</a></li>
    </ul>
    <ul class="right">
      <li><a><span class="icon-basket"> 0</span></a></li>
    </ul>
  </section>
</nav>

Live Implementation

The Sonos Bar implemented on live has a special .stack menu for links on the right side. It also has a second top bar for direct buy messaging. At this time, the Sales Help menu item only appears for large viewports and up. It disappears for medium viewports and down. This pattern is work in progress, so expect more iterations on this in the future.

Please note that country flag is optional. If you include the <span class="flag-icon"> </span> element, the country flag will appear and ties in to a plugin that determines the right flag to show. If you exclude the element from your markup, no flag will appear. This functionality is completely optional.

Free shipping, free 45-day returns

This offer applies to orders shipped within the continental United States and Canada on all sonos.com purchases. Request a return or exchange within 45-days and a free return label will be emailed to you. Contact our expert support team to answer all of your product and order questions.

Choose Your Country


×

Positioning the Bar

The top bar is built with a single nav element with a class of top-bar. It will take on full-browser width by default. To make the top bar stay fixed as you scroll, wrap it in div class="fixed". If you want your navigation to be set to your grid width, wrap it in div class="contain-to-grid". You may use fixed and contain-to-grid together in the wrapping div (div class="contain-to-grid fixed).

Fixed Navigation
<div class="fixed">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>
Contain to Grid
<div class="contain-to-grid">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>

Sticky Top Bar

You may also wrap your top bar in div class="contain-to-grid sticky" and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll. Note: If you are using SCSS, you can control the default sticky class by adjusting the $topbar-sticky-class variable. Make sure the JS variable for sticky_class matches whatever class you use in the variable.

Clickable Top Bar

You can now make the top bar menu dropdowns clickable by adding a data-attribute to the nav element. Here's an example.


HTML

<nav class="top-bar" data-topbar data-options="is_hover: false">

Built-in Components

Several common elements have been supported by default, each one of these elements gets added to either the ul.right or ul.left unordered lists within your Top Bar navigation.

Please note: Built-in components will not look correct when used with the Sonos Bar (for example, the Sonos Bar height is double the height of a normal top bar component). If use-cases present themselves, we can add support as we need it.


Search Bar

<li class="has-form">
  <div class="row collapse">
    <div class="large-8 small-9 columns">
      <input type="text" placeholder="Find Stuff">
    </div>
    <div class="large-4 small-3 columns">
      <a href="#" class="alert button expand">Search</a>
    </div>
  </div>
</li>

Divider

<li class="divider"></li>

Button

<li class="has-form">
  <a href="#" class="button">Get Lucky</a>
</li>

Remove the Title

If you a bar that doesn't include a title, just take out the content within the list item, like so:

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name"><!-- Leave this empty --></li>
  </ul>
</nav>

Optional JavaScript Configuration

Top bar supports data-options configuration.

{
  sticky_class : 'sticky',
  custom_back_text: true, // Set this to false and it will pull the top level link name as the back text
  back_text: 'Back', // Define what you want your custom back text to be if custom_back_text: true
  is_hover: true,
  mobile_show_parent_link: false, // will copy parent links into dropdowns for mobile navigation
  scrolltop : true // jump to top when sticky nav menu toggle is clicked
}