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.
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
}