Secondary and tertiary navigation

Secondary and tertiary navigation are designed to complement primary navigation, helping users on their next level of exploration using left-rail, horizontal, drop-down and breadcrumb navigation options.

Standard scope

This standard applies to:

  • pennmedicine.org
  • All Penn Medicine websites
  • Penn Medicine mobile applications
  • All Penn Medicine digital products

Overview

Secondary and tertiary navigation components are typically used to:

  • Navigate to related content: Quickly navigate between multiple pages related to the same topic or content.
  • Quickly explore a long page: Jump to specific information within a long web page.
  • Find additional information: Explore featured categories or topic areas with the ability to also find additional related information that is not featured.
  • Find information using content hierarchy: Use the information architecture of the web site to navigate to parent information.

Use cases

The following table provides a summary of use cases for each secondary and tertiary navigation type. Visual examples of each navigation type are also provided.

Navigation type
Design System name
When to use
Grid layout
Left Rail Navigation
Navigation-LeftRail
Used on pages that provide an overview, where detail pages are needed for specific information related to this topic. Allows users to navigate between related detail pages.
8 col; Always below the hero.

Not applicable for 12 column grid.
Horizontal Jump Tag Navigation
Navigation-Horizontal-JumpTag
Used on pages with clearly sectioned content with section headings. Allows users to jump to in-page sections with headings that match the jump tags.
12 col: always directly below the hero

8 col: always below the hero
Horizontal Dropdown Navigation
Navigation-Horizontal-Dropdown
Typically used on the landing page for news, article or blog content. Displays top-level links with overflow links contained in a dropdown menu.
12 col: 1 row always above the hero

8 col: 1 row always above the hero
Breadcrumbs
Navigation-Breadcrumbs
Used exclusively to show content hierarchy and help users return to previous sections.
12 col: always at the top of the hero

8 col: always at the top of the hero

Left rail navigation

The left rail navigation allows users to navigate between related pages for a topic and is limited to the following component:

  • Page links - Vertically stacked and aligned to the left of the main content.

Left rail navigation is always fixed/sticky for persistent access as the user scrolls the page. The current page is highlighted.

Horizontal jump tag navigation

The horizontal jump tag navigation allows users to jump to the headings of sections of the page they are viewing, and is limited to the following component:

  • Anchor links - Link to section headings within the page

The active section of the navigation is highlighted as the user scrolls the page.

Horizontal Dropdown Navigation

The horizontal dropdown navigation includes:

  • Inline links - Topic or category links.
  • Drop down menu - “More” dropdown with links for overflow items.

The selected navigation item is visually highlighted.

Breadcrumbs

Breadcrumbs show content hierarchy and help users return to a higher-level page to continue their exploration. The breadcrumb navigation is limited to the following component:

  • Link trail - Displays as a horizontal trail of links separated by chevrons.

This navigation always appears above the primary content of the page.  The last item is not clickable and represents the current page.

Secondary & Tertiary Navigation Behavior

Left Rail Navigation

State
Description
Default
Links appear vertically with neutral styling.
Hover
Link changes color.
Active
Current page is indicated with color change and underline.
Focused
Focus outline appears for keyboard users.

Horizontal Jump Tag Navigation

State
Description
Default
Jump tags are displayed with light styling.
Hover
Tag darkens.
Active
Current in-view section’s tag is highlighted.
Focused
Keyboard focus state uses visible ring or outline.

Horizontal Dropdown Navigation

State
Description
Default
Categories are inline. “More” contains downward-pointing chevron.
Hover
Hovered items become highlighted.
Expanded
Dropdown opens below the “More” label, with vertical list of overflow links.
Selected
Selected category has a visual indicator (e.g., bold or underline).
Focused
Keyboard focus appears around active item.

Breadcrumbs

State
Description
Default
Breadcrumb links styled with neutral tone.
Hover
Links underline or shift color on hover.
Focused
Keyboard users see focus ring or outline.
Active
Last breadcrumb is plain text and not interactive.

Customizable  elements

Secondary and tertiary navigation are flexible and allow for customization of content.  Below are the key components of the design for each type of navigation.

Left rail navigation

Element
Required/Optional
Guidelines
Page links
Required
Displayed as a vertical list.

Horizontal jump tag navigation

Element
Required/Optional
Guidelines
Anchor links
Required
Must match headings within the page.

Horizontal dropdown navigation

Element
Required/Optional
Guidelines
Inline links
Required
Used for primary categories.
Dropdown menu
Optional
Contains overflow items. Includes chevron to indicate menu open or closed.

Breadcrumbs

Element
Required/Optional
Guidelines
Link trail
Required
All but final item should link.
Chevrons
Required
Use consistent icon to separate items.
Final item
Required
Must be plain text to indicate current page.

Guidelines (do’s and don’ts)

Do
  • Use each navigation component only within its specified context.
  • Ensure interactive states meet accessibility standards.
  • Keep link labels short, clear, and relevant to the content structure.
  • Test scroll behavior for jump tags and sticky rail performance.
Don't
  • Combine multiple secondary/tertiary navs on a single page.
  • Use breadcrumbs or horizontal dropdown navigations outside of news, article or blog pages.
  • Overload left rail or jump tag navigation with unnecessary items.
  • Use default states without active styling—visual feedback is required.

Related resources

For designers: Visit the Designers section for access to component specs and Figma files.

‍For developers: Visit the Developers section for implementation details and to access the front-end code library in Storybook.

Contact

For more information about this standard, email: web-standards@pennmedicine.upenn.edu

Last updated

Date
Version
Description
05/01/2025
1.0.0
Initial Release
Penn Medicine, Philadelphia, PA 800-789-7366       © 2025       The Trustees of the University of Pennsylvania