Web
Navigation
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.)
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.
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
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.
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.
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.
Breadcrumbs
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:
