This environment is not optimized for viewing on small or mobile devices. Please view on a larger browser for the best experience.

If you have any questions, please contact us.

About
Overview
Our Formula
Aon experience
how it works
AccessibilityWhat is Accessibility?Digital Design SystemAccessibility and AonAssistive TechnologyAccessibility & color
Feature Request
Give Feedback
UpdatesVersion 2.4Version 2.3Version 2.2Version 2.1Version 2.0Version 1.3Version 1.2Version 1.1Version 1.0
Foundations
Color
icon libraryActionscontrolsnavigationfeedbackcommunicationsview settingsfilesmiscellaneous
Layout12 column gridBreakpoints
spacinglocal spacingglobal spacing
TypographyHeadlinesparagraphsLink Styling
Components
Core Components
alertsBanner AlertsContextual Alerts
buttonsspecificationsimplementation
filter chipsspecificationsimplementation
on/off controlsspecificationsimplementation
form elements
introductionBest PracticesImplementation
checkboxes
radio buttons
selects
text area
text inputsspecificationsimplementation
Modules
navigation
in-page navigation
HeaderHeader BarNavigation Menus
footerBasic footerRobust Footer
progress bars
TabsHorizontal TabsButton Tabsvertical Tabs
Rail Navigation
overlays
modalsSpecificationsStyles
PopoversStandard PopoverAction Menus
tooltipsInfo TextLabel HoverData VisualizationTooltip Implementation
content containers
cardsSmall CardsLarge cards
expansion panelsspecificationsStyle variationsfunctionality
other
TablesSpecificationsImplementation
Templates
dashboard
forms
processes
standard
Data Visualization
foundations
best practices
colorCategoricalValueperformancebackgroundspecifications
data snapshotsspecificationsPage Layouts
global elementsGrid ElementsLegend ChipsTooltips
typography
chart types
Use Cases
Area chartsingle Area ChartStacked Area Chart100% stacked ChartSpecifications
bar chartsingle Bar ChartsGrouped Bar ChartsStacked Bar Charts100% stacked ChartsSpecifications
circular chartPieDonutSemi-circleSpecifications
line chartSingle Line ChartMultiple Line ChartSpecifications
scatter plotTypesImplementation Specifications

In-Page Navigation

In-page navigation patterns are essential for creating usable, engaging environments. Navigation items should be simple, visible, clear and consistent.

Specifications

Breadcrumbs

Breadcrumb navigation can be a great way for users to visualize their location on a website. With a properly organized site hierarchy, it may not be necessary to use breadcrumbs, so only use when there is no other means to show a user’s location on a site, and if it makes sense with your website's linear hierarchy.

EXAMPLE

Fruits / Berries

Berries

Anatomy
1a) Linked Breadcrumb
style: Small Paragraph
color: Teal Dark
hover color: Teal Dark Hover
active color: Teal Dark Active
text-decoration: underline
hover text-decoration: none
2) Unlinked Breadcrumb
color: Navy
text-decoration: none
Breadcrumb Mobile - Linked & Unlinked
font-size: 12px
line-height: 18px
Size & Spacing

Implementation Tips

To ensure the user has an accurate understanding of where they are within your site, be sure to include the full navigational path in your breadcrumbs. Keep the titles consistent with your page titles.

Consider which type of breadcrumb navigation makes the most sense for your site. There are a few different types of breadcrumbs you might use—location-based, attribute-based, and history-based:

  • Location-based breadcrumbs show the user where they are in the site’s hierarchy.
  • Attribute-based breadcrumbs show users into which category their page falls.
  • History-based breadcrumbs show users the specific path they took to arrive at the current page.

Wayfinding Labels

Wayfinding labels offer an alternative to breadcrumbs that allows you to offer a link to a parent page and/or reference to the site section without implementing a full breadcrumb system.

EXAMPLE
Groceries /
Vegetables

Leafy Greens

Anatomy
1) Category Title (Optional)
font-face: Helvetica Now Text
font-weight: 700
font-size: 16px
line-height: 28px
bottom-margin: 0px
text-transform: uppercase
color: Gray 02
2) Parent Page Link (Optional)
color: Teal Dark
hover color: Teal Dark Hover
active color: Teal Dark Active
Category Title & Parent Page Link Mobile
font-size: 12px
line-height: 18px
Size & Spacing

Aon Consumer Experience & Design Group
‍
200 E. Randolph St.
5th Floor
Chicago, IL 60601

global.design@aon.com‍

AboutFoundationsComponentsModulesData Visualization

For best results, please view on Desktop in Chrome or Firefox.