OSU Navbar

OSU navbar is a common element among all Ohio State websites.

The OSU navbar is required.

Branding guidelines require each website to have an Ohio State branded navigation bar.

The OSU navbar is located at the very top of an Ohio State website, providing links to the university homepage and other central resources. Links have been determined based on user analytics of previous OSU navbar versions and must not be modified or removed.

Example

<nav
  id="osu-navbar"
  class="bux-osu-navbar bux-osu-nav"
  aria-label="Ohio State links"
>
  <div class="bux-osu-nav__overlay"></div>
  <div class="bux-osu-nav__wrapper">
    <div class="bux-container">
      <div id="osu-navname-block">
        <a
          class="bux-osu-nav__osu-logo-link"
          href="https://osu.edu"
          rel="noopener"
        >
          <span class="bux-osu-nav__logos">
            <img
              class="bux-image bux-osu-nav__osu-logo-img logo-light"
              src="/images/osu-logos/navbar/osu-navbar.svg"
              alt="The Ohio State University Homepage"
              height=""
              width=""
            />

            <img
              class="bux-image bux-osu-nav__osu-logo-img logo-dark"
              src="/images/osu-logos/navbar/osu-navbar-white.svg"
              alt=""
              height=""
              width=""
            />
          </span>
        </a>
      </div>
      <div id="osu-navlinks-block">
        <button
          type="button"
          id="osu-nav-trigger"
          aria-controls="osu-navlinks"
          aria-expanded="false"
        >
          <span class="visually-hidden">Show Links</span>
        </button>
        <ul
          id="osu-navlinks"
          aria-labelledby="osu-nav-trigger"
          class="bux-osu-nav__links"
        >
          <li class="bux-osu-nav__link">
            <a
              class="bux-base__link"
              href="https://maps.osu.edu"
              rel="noopener"
            >
              <span class="bux-base__link__text">Map</span>
            </a>
          </li>
          <li class="bux-osu-nav__link">
            <a
              class="bux-base__link"
              href="https://buckeyelink.osu.edu"
              rel="noopener"
            >
              <span class="bux-base__link__text">Buckeye Link</span>
            </a>
          </li>
          <li class="bux-osu-nav__link">
            <a
              class="bux-base__link"
              href="https://email.osu.edu"
              rel="noopener"
            >
              <span class="bux-base__link__text">Webmail</span>
            </a>
          </li>
          <li class="bux-osu-nav__link">
            <a
              class="bux-base__link"
              href="https://www.osu.edu/search"
              rel="noopener"
            >
              <span class="bux-base__link__text">Search Ohio State</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

{#
Buckeye UX - version 1.5.6
Copyright (C) 2026 The Ohio State University
#}

{#

Osu Navbar

Available Variables:
  - bux_dist_dir:  Optional. The path of the BUX dist folder.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 05-29-2026 11:16:16
#}

<nav id="osu-navbar" class="bux-osu-navbar bux-osu-nav" aria-label="Ohio State links">
  <div class="bux-osu-nav__overlay"></div>
  <div class="bux-osu-nav__wrapper">
    <div class="bux-container">
      <div id="osu-navname-block">
        {% embed '@bux/link/link.twig'
          with {
            base_class: 'bux-osu-nav__osu-logo-link',
            link_url: 'https://osu.edu',
            bux_dist_dir: bux_dist_dir|default('')
          } only
        %}
          {% block link_content %}
            <span class="bux-osu-nav__logos">
              {% include '@bux/image/image.twig' with {
                image_url: bux_dist_dir ~ '/images/osu-logos/navbar/osu-navbar.svg',
                image_alt_text: 'The Ohio State University Homepage',
                image_class: 'bux-osu-nav__osu-logo-img logo-light'
              } only %}

              {% include '@bux/image/image.twig' with {
                image_url: bux_dist_dir ~ '/images/osu-logos/navbar/osu-navbar-white.svg',
                image_alt_text: '',
                image_class: 'bux-osu-nav__osu-logo-img logo-dark'
              } only %}
            </span>
          {% endblock link_content %}
        {% endembed %}
      </div>
      <div id="osu-navlinks-block">
        <button type="button" id="osu-nav-trigger" aria-controls="osu-navlinks" aria-expanded="false">
          <span class="visually-hidden">Show Links</span>
        </button>
        <ul id="osu-navlinks" aria-labelledby="osu-nav-trigger" class="bux-osu-nav__links">
          {% set navlinks = {
            Map: 'https://maps.osu.edu',
            'Buckeye Link': 'https://buckeyelink.osu.edu',
            Webmail: 'https://email.osu.edu',
            'Search Ohio State': 'https://www.osu.edu/search'
          } %}
          {% for text, url in navlinks %}
            <li class="bux-osu-nav__link">
              {% include '@bux/link/link.twig' with {
                link_url: url,
                link_text: text,
                show_underline: false,
                base_class: "bux-base__link",
              } only %}
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</nav>

Usage

Dos

• Use as is
• Use at the very top of every page of your website

Don'ts

• Don't modify or replace the Ohio State logo
• Don't add, remove, or modify links

Implementation notes

The OSU Navbar, along with the Header and Site Navigation should be enclosed by the <header> element.

Accessibility

• The Skip Navigation component must be the first component on the page, before the OSU navbar. The Skip Navigation will ordinarily be hidden unless it has keyboard focus.