Web
Navigation
The HBS.edu navigation system is developed to guide the user though a consistent, readable visual hierarchy.
Section
Main navigation inside each section can vary from one to approximately six across, depending on label length, but it must always appear in the standard position across HBS.edu. If a section requires more items, consider identifying the least trafficked and moving those to Section Utility.
Navigation items are separated by a single white rule, set to 30% opacity to match the top and bottom rules. Spacing between items varies, but the distance between the margins and labels and between the white rules and labels should always be equal. If there are fewer than four navigation items, begin the labels 40 px from the left margin and set with 40px padding between the labels and the rules.
A link to the main page of a section (e.g., "HOME") should not be included in the primary navigation bar. Clicking on the section/site name returns the user to the section home page.
Section Utility
The utility links appear above the main Section navigation and are oriented to the right margin. There are 24 px between labels and they begin 12 px from the right margin. (This is the only instance of Arial in the new design system.)
Breadcrumbs
Breadcrumbs are not intended to be the main source of site navigation. Having a breadcrumb link to a page is insufficient -- all pages must be linked through the primary, secondary, and tertiary navigation.
The breadcrumb is an indicator of the page's location within the site hierarchy, not the user's path. The current page is shown in the breadcrumb.
Breadcrumb Dropdown
Breadcrumb dropdowns are used when a page has sub-navigation. There may be multiple dropdowns within a breadcrumb thread. Hover color behind the links in the dropdown is inherited from the primary color field; current page text color is also inherited.
By following the breadcrumb rules above:
1. The current page is consistently shown on every page.
2. Holistic navigation is never lost (the user always knows orientation and can easily navigate through the site).
Local Subnavigation
Whenever possible we recommend eliminating local subnavigation to achieve a clean and simple page design. Current web practice and trends are moving away from strict hierarchical navigation structures and on-page subnavigation. As a result, we have designed body navigation promos in order to achieve an intuitive user experience with less subnavigation.
We recommend INCLUDING local subnavigation for:
1. multiple pages that explain a step-by-step process
2. data sets that are likely to be explored systematically
When local subnavigation is warranted the following patterns should be utilized:
Standard
Relating Local Subnavigation to Page Heads
A helpful rule of thumb to remember is that if local subnavigation (style shown immediately above) appears below the primary color field, all links shown should be subordinate to the primary page head. For instance, on this page the primary page head represents the level above all local subnavigation shown in the left sidebar and the active page is shown as the secondary page head (in smaller black type below the primary page head).
Tabs
On teal pages, the tab off-state (when appearing at the bottom of the primary color field) may be #00897b instead of black. On light blue pages, the tab off-state (when appearing at the bottom of the primary color field) may be #3684b9 instead of black.