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--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--ctas`	Child of `.s-topbar`	Provides layout for various calls to action, e.g. log in or sign up links. This container provides layout only, leaving child elements to their own styling.
`.s-topbar--item`	Child of `.s-topbar--content > li`, `.s-topbar--ctas > li`	A topbar item element, styles itself based on where it is placed. Can add `.is-selected`
`.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">
    <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>

        <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">
                    @Svg.Inbox <span class="s-activity-indicator">…</span>
                </a>
            </li>
            <li><a href="…" class="s-topbar--item">…</a></li>
        </ol>
    </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__light">…</header>
<header class="s-topbar s-topbar__dark">…</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="…" class="s-topbar--logo">…</a>

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

    <ol class="s-topbar--content">…</ol>
</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="…" class="s-topbar--menu-btn">…</a>
    <a href="…" class="s-topbar--logo">…</a>

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

    <ol class="s-topbar--navigation">
        <li><a href="…" class="s-topbar--item">About</a></li>
        <li><a href="…" class="s-topbar--item is-selected">Products</a></li>
        <li><a href="…" class="s-topbar--item">For Teams</a></li>
    </ol>

    <ol class="s-topbar--ctas">
        <li>
            <a href="…" class="s-topbar--item s-btn s-btn__filled">Log in</a>
        </li>
        <li>
            <a href="…" class="s-topbar--item s-btn s-btn__primary">Sign up</a>
        </li>
    </ol>
</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">
    <div class="s-topbar--container wmx75">…</div>
</header>