Topbar

Razor

The topbar component is a navigation bar that is placed at the top of the page.

Class Applies to Description
.s-topbar N/A Base class
.s-topbar__light .s-topbar Forced light theme
.s-topbar__dark .s-topbar Forced dark theme
.s-topbar--container Child of .s-topbar Add atomic classes here to customize internal content width; defaults to .wmx12
.s-topbar--logo Child of .s-topbar The logo. Can apply .is-selected to this
.s-topbar--menu-btn Child of .s-topbar Hamburger menu icon. Add .is-selected to turn it into an X
.s-topbar--content Child of .s-topbar Contains li > .s-topbar--item elements that don’t look like anything in particular
.s-topbar--item Child of .s-topbar--content > li A topbar item element with hover, active and focused styling. Can add .is-selected
.s-topbar--item__unset .s-topbar--item This class excludes the .s-topbar--item from any automatic styling. This is useful for calls to action, e.g. buttons or log in links
.s-topbar--navigation Parent of .s-topbar--container Apply to nav to ensure proper layout
.s-topbar--notice Child of .s-topbar A badge-styled notice that stands out. Add .is-unread to make it stand out more
.s-topbar--searchbar Child of .s-topbar Contains a search input and an optional .s-select. Hides itself on mobile.
.s-topbar--searchbar--input-group Child of .s-topbar--searchbar Holds the search input + icon
.s-topbar--searchbar__open .s-topbar--searchbar On mobile, this class shows the search input below the topbar. Toggle this class with a button

At their most basic, our topbar component provides branding and context for the user. In this example, we have a scaled back version showing some global navigation, user settings & preferences, and notifications.

<header class="s-topbar">
<div class="s-topbar--container">
<a href="…" class="s-topbar--menu-btn"><span></span></a>
<a href="…" class="s-topbar--logo">@Svg.LogoGlyph.with("native")</a>
<nav class="s-topbar--navigation" aria-label="notifications, help, and network">
<ol class="s-topbar--content">
<li>
<a href="…" class="s-topbar--item s-user-card s-user-card__small"></a>
</li>
<li>
<a href="…" class="s-topbar--item" aria-label="Inbox">
@Svg.Inbox <span class="s-activity-indicator"></span>
</a>
</li>
<li><a href="…" class="s-topbar--item"></a></li>
</ol>
</nav>
</div>
</header>

Depending on the user's authentication levels, we may need to include lots of options and menus. The topbar can include new marketing notifications, marketing navigation, a search bar, user details, moderator tools, review queues, achievements, inbox, help, and various bits of navigation.

By default, the topbar automatically switches between light and dark modes as expected. In specific products like Teams, we choose to force a dark version to help the user differentiate between contexts. You can choose either light or dark by applying their respective classes to the main component.

<header class="s-topbar"></header>
<header class="s-topbar s-topbar__dark"></header>
<header class="s-topbar s-topbar__light"></header>

The topbar can also include a search bar. Depending on the user’s products, it may be appropriate to add a select menu to choose the context for their search.

<header class="s-topbar">
<a href="…" class="s-topbar--logo"></a>

<form id="search" class="s-topbar--searchbar" autocomplete="off">
<div class="s-select">
<select aria-label="Search scope"></select>
</div>
<div class="s-topbar--searchbar--input-group">
<input type="text" placeholder="Search…" value="" autocomplete="off" class="s-input s-input__search" />
@Svg.Search.With("s-input-icon s-input-icon__search")
</div>
</form>

<nav class="s-topbar--navigation" aria-label="primary navigation">
<ol class="s-topbar--content"></ol>
</nav>
</header>

If a user is logged out, or is anonymous, we provide a container for various calls to actions. This is a less opinionated container that only provides layout without styling of the individual children.

<header class="s-topbar">
<a href="…" class="s-topbar--menu-btn"></a>
<a href="…" class="s-topbar--logo"></a>

<a href="#" class="s-topbar--notice is-unread">
New
</a>

<nav aria-label="More from Stack Overflow">
<ol class="s-navigation">
<li><a href="…" class="s-navigation--item">About</a></li>
<li><a href="…" class="s-navigation--item is-selected">Products</a></li>
<li><a href="…" class="s-navigation--item">For Teams</a></li>
</ol>
</nav>

<nav class="s-topbar--navigation" aria-label="Log in or sign up">
<ol class="s-topbar--content">
<li>
<a href="…" class="s-topbar--item s-topbar--item__unset s-btn s-btn__filled">Log in</a>
</li>
<li>
<a href="…" class="s-topbar--item s-topbar--item__unset ml4 s-btn s-btn__primary">Sign up</a>
</li>
</ol>
</nav>
</header>

By default, the topbar has a container that is full width, up to our widest point as defined by our global variables. If you need to override this, you can apply any combination of atomic base classes to the container.

<header class="s-topbar">
<div class="s-topbar--container wmx75"></div>
</header>
Deploys by Netlify