Section Navigation

On screens smaller than 1000 px, section navigation (both primary and utility) is, by default, collapsed and is available by tapping on the "Menu" (dashes) icon that sits to the right of the collapsed search icon. The tappable area for the Menu icon (and any other navigation icons) should be 80px square.

(For screens larger than 1000 px, see desktop navigation styles.)

Phone Head

When expanded, the navigation shows the primary section navigation on the top with section utility navigation below. Schoolwide navigation is then shown in a new color block. The schoolwide navigation is the same across all hbs.edu pages.

The menu slides in from the right and pushes all content to the side. To close, click the menu icon once more or any area outside of the fly-out. The menu will then slide back into place. The background of the fly-out menu should adopt the color field of the primary color field.

Phone Flyout Nav

Local navigation submenu

If a page has subordinate navigation, a submenu "plus/minus" icon is displayed to the left of the page title on screens smaller than 1000 px (by default, this menu is closed on page load).

When expanded, the subnavigation opens below the page title on a background the same color as the main color field. The user can click on a subpage title to access the page, or click the close icon to collapse the menu.

No Subtitle

Phone Navigation: No Suhead

With Secondary Page Head

When there is a secondary page head, the expanded navigation appears between the primary and secondary page heads and the current page is bold and indicated with an arrow.

phone subnavigation with page subhead

Whenever a Page Has Subnavigation

In order to accommodate subnavigtaion, any page with subnavigation automatically moves into the primary head position on phone -- even when it appears as a secondary page head on desktop.

Phone Navigation: Pages with subnavigation need to appear in primary page head position

When a Site Has Dropdown Heads with No Associated Landing Pages

The dropdown heads appear on first click and further navigation cascades on subsequent click. After selecting a navigation item, the resulting page name appears as the secondary page head regardless of level within the site.

Dropdown Nav with No Associated Landing Pages


The breadcrumbs appear above the page title. Tapping on a breadcrumb brings the user to the associated page.

On screens smaller than 600 px, only two breadcrumbs appear (the current page and preceding page or drop down) with any preceding breadcrumbs collapsed as shown:

"Harvard Business School," however, is always collapsed even if it is one of the two closest breadcrumbs: