Sections

Topbar

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

Classes

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--skip-link`	Child of `.s-topbar`	Applied to an anchor tag for bypassing the top-level navigation links and jump to the main content on a page. See WCAG Technique G1
`.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

Basic usage

Section titled Basic usage

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">
    <a href="#content" class="s-topbar--skip-link">Skip to main content</a>
    <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>

Section titled Skip Link

All topbars must include a skip link. Usually a skip link should be the first focusable element of a page (with the expection of cookie consent dialogs). Skip links are a mechanism to bypass blocks of content that are repeated on multiple web pages and comply with WCAG SC 2.4.1.

Note: Skip links become visible only when focused via keyboard navigation and they are announced by screen readers. In the example below hit Tab on your keyboard to see it appearing when in focus.

<header class="s-topbar">
    <a href="#content" class="s-topbar--skip-link">Skip to main content</a>
    <div class="s-topbar--container">…</div>
</header>

Advanced usage

Section titled Advanced usage

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.

Theming

Section titled Theming

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>

Auto

Dark

Light

Search bar

Section titled Search bar

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="#content" class="s-topbar--skip-link">Skip to main content</a>
    <div class="s-topbar--container">
        <a href="…" class="s-topbar--logo">…</a>

        <form id="search" class="s-topbar--searchbar" autocomplete="off" role="search">
            <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>
    </div>
</header>

With select

Input only

Section titled Navigation / Notices / CTAs

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="#content" class="s-topbar--skip-link">Skip to main content</a>
    <div class="s-topbar--container">
        <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__filled">Sign up</a>
                </li>
            </ol>
        </nav>
    </div>
</header>

Variable content width

Section titled Variable content width

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">
    <a href="#content" class="s-topbar--skip-link">Skip to main content</a>
    <div class="s-topbar--container wmx75">…</div>
</header>