Please refer to the One Find documentation
for documentation on implementing the
global navigation header,
site area navigation (secondary navigation),
page wrapper, and
footer.
Navigation
Purpose
Lists of links help customers to navigate the site and guide them to tasks they want to perform. The placement of navigational tools varies depending on the content, and may be found on the side, header and footer of the page. The appearance and interaction of navigation also varies, and includes tools such as dropdowns, drop-ups, and sliding transitions.
Requirements
The DLS navigation component requires both dls.css and dls.js due to the complexities involved with its logic, functionality, and animations.
Primary Navigation
Usage
Primary navigation provides a list of links that allow users to navigate and orientate themselves. Place the primary navigation in a standard place, such as across the top of the page, to make the site easier to use. This will result in a lower bounce rate, more pages per visit, and higher conversions.
Use the active state to show which page the customer is currently on. Keep navigation links short and perform usability testing to find the right balance between breadth and depth.
Example - Horizontal (60PX)
<nav class="nav nav-horizontal border nav-large" data-toggle="nav" data-responsive="md">
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#1">Primary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#2">Primary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#3">Primary 3</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#4">Primary 4</a>
</li>
</ul>
</nav>Example - Horizontal (50PX)
<nav class="nav border nav-horizontal" data-toggle="nav" data-responsive="true">
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#payments">Payments</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#profile">Profiles & Preferences</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#manage">Card Management</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#info">Information & Help</a>
</li>
</ul>
</nav>Sticky Navigation
Usage
Our primary navigation can also be a sticky, or fixed, navigation that is locked into place so that it does not disappear when the user scrolls down the page. It is accessible from anywhere on the site without the customer having to scroll.
Example - Sticky Logotype on Bright Blue
<nav class="nav nav-horizontal nav-header nav-large nav-sticky nav-inverse dls-bright-blue-bg" data-toggle="nav" data-responsive="true">
<div class="nav-overlay"></div>
<div class="nav-brand">
<span class="flex">
<img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-line-white.svg" alt="American Express">
</span>
</div>
<button class="nav-burger hidden-md-up position-relative focus-light" aria-label="Toggle navigation" aria-haspopup="true" aria-expanded="false">
</button>
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link focus-light-md-up" aria-current="page" href="#1">Primary 1</a>
</li>
<li class="nav-item">
<a class="nav-link focus-light-md-up" aria-current="false" href="#2">Primary 2</a>
</li>
<li class="nav-item">
<a class="nav-link focus-light-md-up" aria-current="false" href="#3">Primary 3</a>
</li>
<li class="nav-item">
<a class="nav-link focus-light-md-up" aria-current="false" href="#4">Primary 4</a>
</li>
</ul>
</nav>Example - Sticky Logotype on White
<nav class="nav nav-horizontal nav-header nav-large nav-sticky border" data-toggle="nav" data-responsive="true">
<div class="nav-overlay"></div>
<div class="nav-brand">
<span class="flex">
<img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-line.svg" alt="American Express">
</span>
</div>
<button class="nav-burger hidden-md-up position-relative dls-bright-blue" aria-label="Toggle navigation" aria-haspopup="true" aria-expanded="false">
</button>
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#1">Primary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#2">Primary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#3">Primary 3</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#4">Primary 4</a>
</li>
</ul>
</nav>Example - Sticky Blue Box on White
<nav class="nav nav-horizontal nav-header nav-large nav-sticky border" data-toggle="nav" data-responsive="true">
<div class="nav-overlay"></div>
<div class="nav-brand">
<span class="dls-logo-bluebox-solid-sm flex">
<img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-bluebox-solid.svg" alt="American Express">
</span>
</div>
<button class="nav-burger hidden-md-up dls-bright-blue" aria-label="Toggle navigation" aria-haspopup="true" aria-expanded="false">
</button>
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#1">Primary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#2">Primary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#3">Primary 3</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#4">Primary 4</a>
</li>
</ul>
</nav>Example - Sticky Blue Box on Transparent
<nav class="nav nav-horizontal nav-header nav-large nav-sticky nav-inverse bg-none" data-toggle="nav" data-responsive="true">
<div class="nav-overlay"></div>
<div class="nav-brand">
<span class="dls-logo-bluebox-solid-sm flex">
<img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-bluebox-solid.svg" alt="American Express">
</span>
</div>
<button class="nav-burger hidden-md-up focus-light" aria-label="Toggle navigation" aria-haspopup="true" aria-expanded="false">
</button>
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link focus-light-md-up" aria-current="page" href="#1">Primary 1</a>
</li>
<li class="nav-item">
<a class="nav-link focus-light-md-up" aria-current="false" href="#2">Primary 2</a>
</li>
<li class="nav-item">
<a class="nav-link focus-light-md-up" aria-current="false" href="#3">Primary 3</a>
</li>
<li class="nav-item">
<a class="nav-link focus-light-md-up" aria-current="false" href="#4">Primary 4</a>
</li>
</ul>
</nav>Example - Primary Vertical
<nav class="nav nav-vertical border" data-toggle="nav">
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#1">Primary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#2">Primary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#3">Primary 3</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#4">Primary 4</a>
</li>
</ul>
</nav>Secondary Navigation
Usage
A secondary navigation results when a primary navigation menu item contains multiple selectable options. If a primary navigation has a secondary menu, then it will display on hover on large breakpoints. Moving your cursor anywhere outside the secondary navigation will collapse the menu.
Example - Secondary Horizontal Single Column
<nav class="nav nav-horizontal border nav-chevron" data-toggle="nav" data-responsive="true" data-overlay="true">
<div class="nav-overlay"></div>
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#home">Home</a>
</li>
<li class="nav-item">
<button class="nav-link caret" aria-current="page" aria-expanded="true" aria-haspopup="true">Payments</button>
<div class="nav-menu shadow-1-md-up">
<div class="nav-menu-section">
<ul aria-label="Payments">
<li class="nav-item">
<a class="nav-link" href="#secondary1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#secondary2">Secondary 2</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#profile">Profiles & Preferences </a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#info">Information & Help</a>
</li>
</ul>
</nav>Example - Secondary Vertical
<nav class="nav nav-vertical border nav-chevron" data-toggle="nav">
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#primary1">Primary 1</a>
</li>
<li class="nav-item">
<button class="nav-link caret" aria-current="page" aria-haspopup="true" aria-expanded="true">Primary 2</button>
<div class="nav-menu">
<div class="nav-menu-section">
<ul aria-label="Primary 2">
<li class="nav-item">
<a class="nav-link" href="#secondary1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#secondary2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#secondary3">Secondary 3</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#primary3">Primary 3</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#primary4">Primary 4</a>
</li>
</ul>
</nav>Example - Secondary Horizontal with Section Headers
<nav class="nav nav-horizontal border nav-chevron" data-toggle="nav" data-responsive="md" data-overlay="true">
<div class="nav-overlay"></div>
<ul class="nav-menu">
<li class="nav-item">
<button class="nav-link caret" aria-current="page" aria-expanded="true" aria-haspopup="true">My Account</button>
<div class="nav-menu nav-menu-full shadow-1-md-up">
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Card Accounts</h2>
<ul aria-label="Card Accounts">
<li class="nav-item">
<a class="nav-link" href="#home">Account Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#statements">Statements & Activity</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#benefits">Card Benefits</a>
</li>
</ul>
</div>
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Business Accounts</h2>
<ul aria-label="Business Accounts">
<li class="nav-item">
<a class="nav-link" href="#business">OPEN Small Business</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#merchant">Merchant Home</a>
</li>
</ul>
</div>
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Other Accounts</h2>
<ul aria-label="Other Accounts">
<li class="nav-item">
<a class="nav-link" href="#savings">Savings Accounts and CDs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#membership">Membership Rewards® Point Summary</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret" aria-current="false" aria-expanded="false" aria-haspopup="true">Cards</button>
<div class="nav-menu nav-menu-full shadow-1-md-up">
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Personal Cards</h2>
<ul aria-label="Personal Cards">
<li class="nav-item">
<a class="nav-link" href="#cashback">Cash Back Credit Cards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#rewards">Rewards Points Cards</a>
</li>
</ul>
</div>
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Business Cards</h2>
<ul aria-label="Business Cards">
<li class="nav-item">
<a class="nav-link" href="#small">Small Business</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#medium">Mid-sized Business</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#large">Large Business</a>
</li>
</ul>
</div>
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Prepaid Cards</h2>
<ul aria-label="Prepaid Cards">
<li class="nav-item">
<a class="nav-link" href="#prepaid">Prepaid Debit Cards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gift">Gift Cards</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret" aria-current="false" aria-expanded="false" aria-haspopup="true">Travel</button>
<div class="nav-menu nav-menu-full shadow-1-md-up">
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Personal Travel</h2>
<ul aria-label="Personal Travel">
<li class="nav-item">
<a class="nav-link" href="#trip">Book A Trip</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hotels">Fine Hotels & Resorts</a>
</li>
</ul>
</div>
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Business Travel</h2>
<ul aria-label="Business Travel">
<li class="nav-item">
<a class="nav-link" href="#corporate">Corporate Travel Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fx">Foreign Exchange Services</a>
</li>
</ul>
</div>
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Other Travel Services</h2>
<ul aria-label="Other Travel Services">
<li class="nav-item">
<a class="nav-link" href="#insurance">Travel Insurance</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hotline">Global Assist Hotline</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret" aria-current="false" aria-expanded="false" aria-haspopup="true">Rewards</button>
<div class="nav-menu nav-menu-full shadow-1-md-up">
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Membership Rewards</h2>
<ul aria-label="Membership Rewards">
<li class="nav-item">
<a class="nav-link" href="#use-points">Use Points</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#points-summary">Point Summary</a>
</li>
</ul>
</div>
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Card Rewards and Benefits</h2>
<ul aria-label="Card Rewards and Benefits">
<li class="nav-item">
<a class="nav-link" href="#entertainment">Entertainment and Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#refer">Refer a Friend</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>Example - Vertical with icons and section headers
<nav class="nav nav-vertical border nav-chevron nav-icons" data-toggle="nav">
<ul class="nav-menu">
<li class="nav-item">
<button class="nav-link caret flex" aria-expanded="true" aria-current="page" aria-haspopup="true">
<i class="valign-top pad-1-r" data-dls-icon="account" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
My Account
</button>
<div class="nav-menu nav-menu-full">
<div class="nav-menu-section">
<h2 class="heading-1">Section 1</h2>
<ul aria-label="Section 1">
<li class="nav-item">
<a class="nav-link" href="#1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3">Secondary 3</a>
</li>
</ul>
</div>
<div class="nav-menu-section">
<h2 class="heading-1">Section 2</h2>
<ul aria-label="Section 2">
<li class="nav-item">
<a class="nav-link" href="#1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3">Secondary 3</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret flex" aria-expanded="false" aria-haspopup="true">
<i class="valign-top pad-1-r" data-dls-icon="card" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
Cards
</button>
<div class="nav-menu nav-menu-full">
<div class="nav-menu-section">
<h2 class="heading-1">Section 1</h2>
<ul aria-label="Section 1">
<li class="nav-item">
<a class="nav-link" href="#1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3">Secondary 3</a>
</li>
</ul>
</div>
<div class="nav-menu-section">
<h2 class="heading-1">Section 2</h2>
<ul aria-label="Section 2">
<li class="nav-item">
<a class="nav-link" href="#1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3">Secondary 3</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret flex" aria-expanded="false" aria-haspopup="true">
<i class="valign-top pad-1-r" data-dls-icon="airplane" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
Travel
</button>
<div class="nav-menu nav-menu-full">
<div class="nav-menu-section">
<h2 class="heading-1">Section 1</h2>
<ul aria-label="Section 1">
<li class="nav-item">
<a class="nav-link" href="#1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3">Secondary 3</a>
</li>
</ul>
</div>
<div class="nav-menu-section">
<h2 class="heading-1">Section 2</h2>
<ul aria-label="Section 2">
<li class="nav-item">
<a class="nav-link" href="#1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3">Secondary 3</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret flex" aria-expanded="false" aria-haspopup="true">
<i class="valign-top pad-1-r" data-dls-icon="insurance" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
Insurance
</button>
<div class="nav-menu nav-menu-full">
<div class="nav-menu-section">
<h2 class="heading-1">Section 1</h2>
<ul aria-label="Section 1">
<li class="nav-item">
<a class="nav-link" href="#1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3">Secondary 3</a>
</li>
</ul>
</div>
<div class="nav-menu-section">
<h2 class="heading-1">Section 2</h2>
<ul aria-label="Section 2">
<li class="nav-item">
<a class="nav-link" href="#1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3">Secondary 3</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret flex" aria-expanded="false" aria-haspopup="true">
<i class="valign-top pad-1-r" data-dls-icon="rewards" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
Rewards
</button>
<div class="nav-menu nav-menu-full">
<div class="nav-menu-section">
<h2 class="heading-1">Section 1</h2>
<ul aria-label="Section 1">
<li class="nav-item">
<a class="nav-link" href="#1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3">Secondary 3</a>
</li>
</ul>
</div>
<div class="nav-menu-section">
<h2 class="heading-1">Section 2</h2>
<ul aria-label="Section 2">
<li class="nav-item">
<a class="nav-link" href="#1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3">Secondary 3</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret flex" aria-expanded="false" aria-haspopup="true">
<i class="valign-top pad-1-r" data-dls-icon="business" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
Business
</button>
<div class="nav-menu nav-menu-full">
<div class="nav-menu-section">
<h2 class="heading-1">Section 1</h2>
<ul aria-label="Section 1">
<li class="nav-item">
<a class="nav-link" href="#1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3">Secondary 3</a>
</li>
</ul>
</div>
<div class="nav-menu-section">
<h2 class="heading-1">Section 2</h2>
<ul aria-label="Section 2">
<li class="nav-item">
<a class="nav-link" href="#1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3">Secondary 3</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>Example - Navigation Dropdown
<nav class="nav nav-vertical border nav-chevron nav-icons" data-toggle="nav">
<div class="margin-1-tb margin-2-lr">
<button class="nav-dropdown flex" aria-haspopup="true" aria-expanded="false" aria-label="Click to open navigation panel">
<i class="pad-1-r" data-dls-icon="home" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
Home
</button>
</div>
<ul class="nav-menu border-t hidden">
<li class="nav-item">
<a class="nav-link flex" aria-current="page" href="#home">
<i class="pad-1-r" data-dls-icon="home" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
Home
</a>
</li>
<li class="nav-item">
<button class="nav-link caret flex" aria-current="false" aria-haspopup="true" aria-expanded="false">
<i class="pad-1-r" data-dls-icon="account" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
My Account
</button>
<div class="nav-menu nav-menu-full">
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Section 1</h2>
<ul aria-label="Section 1">
<li class="nav-item">
<a class="nav-link" href="#secondary1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#secondary2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#secondary3">Secondary 3</a>
</li>
</ul>
</div>
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Section 2</h2>
<ul aria-label="Section 2">
<li class="nav-item">
<a class="nav-link" href="#secondary1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#secondary2">Secondary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#secondary3">Secondary 3</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret icon-hover flex" aria-current="false" aria-haspopup="true" aria-expanded="false">
<i class="pad-1-r" data-dls-icon="card" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
Cards
</button>
<div class="nav-menu nav-menu-full">
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Section 1</h2>
<ul aria-label="Section 1">
<li class="nav-item">
<a class="nav-link" href="#secondary1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#secondary2">Secondary 2</a>
</li>
</ul>
</div>
<div class="nav-menu-section col-md-3">
<h2 class="heading-1">Section 2</h2>
<ul aria-label="Section 2">
<li class="nav-item">
<a class="nav-link" href="#secondary1">Secondary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#secondary2">Secondary 2</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link icon-hover flex" aria-current="false" href="#travel">
<i class="pad-1-r" data-dls-icon="airplane" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
Travel
</a>
</li>
<li class="nav-item">
<a class="nav-link icon-hover flex" aria-current="false" href="#insurance">
<i class="pad-1-r" data-dls-icon="insurance" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
Insurance
</a>
</li>
<li class="nav-item">
<a class="nav-link icon-hover flex" aria-current="false" href="#rewards">
<i class="pad-1-r" data-dls-icon="rewards" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
Rewards
</a>
</li>
<li class="nav-item">
<a class="nav-link icon-hover flex" aria-current="false" href="#business">
<i class="pad-1-r" data-dls-icon="business" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
Business
</a>
</li>
</ul>
</nav>Tertiary Navigation
Usage
Place vertical (side) or horizontal (tabbed) navigation options below secondary navigation on a page.
Side Navigation
Ensure that the list of side navigation items doesn’t go below the fold. If the navigation hierarchy is too long, items at the bottom could get overlooked. Keep side navigation no more than 2 tiers deep.
Example - Tertiary Navigation
<nav class="nav nav-vertical border nav-chevron" data-toggle="nav">
<ul class="nav-menu">
<li class="nav-item">
<button class="nav-link caret" aria-current="false" aria-haspopup="true" aria-expanded="false">Primary 1</button>
<div class="nav-menu">
<div class="nav-menu-section">
<ul aria-label="Primary 1">
<li class="nav-item">
<a class="nav-link" href="#secondary1">Secondary 1</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret" aria-current="page" aria-expanded="true">Primary 2</button>
<div class="nav-menu">
<div class="nav-menu-section">
<ul aria-label="Primary 2">
<li class="nav-item">
<a class="nav-link" href="#secondary1">Secondary 1</a>
</li>
<li class="nav-item">
<button class="nav-link caret" aria-current="false" aria-expanded="false" aria-haspopup="true">Secondary 2</button>
<div class="nav-menu">
<div class="nav-menu-section">
<ul aria-label="Secondary 2">
<li class="nav-item">
<a class="nav-link" href="#tertiary1">Tertiary 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tertiary2">Tertiary 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tertiary3">Tertiary 3</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret" aria-current="false" aria-expanded="false" aria-haspopup="true">Secondary 3</button>
<div class="nav-menu">
<div class="nav-menu-section">
<ul aria-label="Secondary 3">
<li class="nav-item">
<a class="nav-link" href="#tertiary1">Tertiary 1</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#primary3">Primary 3</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="#primary4">Primary 4</a>
</li>
</ul>
</nav>Footer
Usage
The footer appears at the bottom of a page. Because it often contains links to other parts of the site, it’s an essential tool for navigation and helps customers find information quickly. Keep footer links short and test to determine the ideal length and depth for usability.
Example - U.S. Footer
<footer class="nav nav-horizontal border nav-chevron nav-footer" data-toggle="nav" data-responsive="md">
<div class="pad pad-responsive-lr">Last Login: Aug 13 2019 @ 06:49 PM</div>
<hr>
<nav>
<ul class="nav-menu">
<li class="nav-item">
<button class="nav-link caret heading-1" aria-current="page">About</button>
<div class="nav-menu">
<div class="nav-menu-section">
<ul>
<li class="nav-item">
<a href="#about" class="nav-link">About American Express</a>
</li>
<li class="nav-item">
<a href="#investor" class="nav-link">Investor Relations</a>
</li>
<li class="nav-item">
<a href="#career" class="nav-link">Careers</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret heading-1" aria-current="false">Links You May Like</button>
<div class="nav-menu">
<div class="nav-menu-section">
<ul>
<li class="nav-item">
<a href="#membership" class="nav-link">Membership Rewards®</a>
</li>
<li class="nav-item">
<a href="#credit" class="nav-link">Credit Secure</a>
</li>
<li class="nav-item">
<a href="#serve" class="nav-link">Serve</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret heading-1" aria-current="false">Products & Services</button>
<div class="nav-menu">
<div class="nav-menu-section">
<ul>
<li class="nav-item">
<a href="#consumer" class="nav-link">Credit Cards</a>
</li>
<li class="nav-item">
<a href="#business" class="nav-link">Small Business Cards</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<button class="nav-link caret heading-1" aria-current="false">Additional Information</button>
<div class="nav-menu">
<div class="nav-menu-section">
<ul>
<li class="nav-item">
<a href="#agreement" class="nav-link">Card Agreements</a>
</li>
<li class="nav-item">
<a href="#education" class="nav-link">Financial Education</a>
</li>
<li class="nav-item">
<a href="#benefits" class="nav-link">Servicemember Benefits</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
<hr>
<div class="stack-3 pad-2-lr pad-3-t pad-4-b">
<div class="row">
<div class="col-md-6">
<span class="dls-logo-line-sm">
<img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-line.svg" alt="American Express">
</span>
</div>
<div class="col-md-6 text-align-right text-align-left-sm-down margin-3-t-sm-down">
<span class="dls-flag flag-sm margin-1-r">
<img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/flags/dls-flag-us.svg" alt="United States Flag">
</span>United States
<a href="#change" class="margin-1-l link-underlined">Change Country</a>
</div>
</div>
<div>
<a href="#fb">
<img class="imagephoto-social" src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/social/social-network-facebook.svg" alt="Facebook">
</a>
<a href="#twitter">
<img class="imagephoto-social" src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/social/social-network-twitter.svg" alt="Twitter">
</a>
<a href="#instagram">
<img class="imagephoto-social" src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/social/social-network-instagram.svg" alt="Instagram">
</a>
<a href="#linkedin">
<img class="imagephoto-social" src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/social/social-network-linkedin.svg" alt="Linkedin">
</a>
<a href="#youtube">
<img class="imagephoto-social" src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/social/social-network-youtube.svg" alt="Youtube">
</a>
</div>
<div>
<ul class="list-links-inline-separator">
<li><a href="#terms" class="link-underlined">Terms of Service</a></li>
<li><a href="#privacy" class="link-underlined">Privacy Center</a></li>
<li><a href="#ad" class="link-underlined">AdChoices</a></li>
<li><a href="#security" class="link-underlined">Security Center</a></li>
</ul>
</div>
<div class="stack">
<p>All users of our online services subject to Privacy Statements and agree to be bound by Terms of Service. Please review.</p>
<p>© 2019 American Express Company. All rights reserved.</p>
</div>
</div>
</footer>Styles
| Class Name | Element | Description | Required |
|---|---|---|---|
.nav |
<nav> |
Styles a navigation element with z-index 99. | yes |
.nav-horizontal |
<nav> |
Styles the navigation in horizontal layout. | .nav |
.nav-vertical |
<nav> |
Styles the navigation in vertical layout. | .nav |
.nav-menu |
<ul> |
Styles the navigation menu at the <ul> level. |
.nav |
.nav-menu-full |
<div> |
Styles the horizontal nav menu dropdown to span full width. | .nav-horizontal .nav-menu |
.nav-menu-section |
<div> |
Wraps the secondary and tertiary sub-menu <ul>. |
.nav-vertical |
.nav-link |
<li> |
Styles the navigation links at the <li> level. |
.nav-menu |
.nav-chevron |
<nav> |
Styles the navigation with chevrons; used for secondary and tertiary vertical navigation. | .nav-vertical |
.caret |
<button> |
Adds a chevron on the expandable nav-item. | .nav-vertical .nav-chevron |
.nav-icons |
<nav> |
Styles navigation with icons. | .nav-vertical |
.nav-dropdown |
<button> |
Styles the navigation dropdown component. | no |
.nav-footer |
<footer> |
Styles the navigation footer component. | .nav-horizontal / .nav-vertical |
.nav-burger |
<button> |
Styles the burger button that toggles the side nav menu. | no |
.nav-overlay |
<div> or <span> |
Adds an overlay over the content, under the navigation. | no |
.nav-large |
<nav> |
Styles the navigation at a taller 60px height. | no |
.nav-header |
<nav> |
Handles navigation alignment with logos. | no |
.nav-brand |
parent container wrapping the <img> |
Styles the brand logo on the nav. | no |
.nav-inverse |
<nav> |
Styles the navigation text to white; used for navigations with blue backgrounds. | no |
.nav-sticky |
<nav> |
Positions the navigation fixed at the top. | no |
Functionality
The DLS navigation component requires both dls.css and dls.js due to the complexities involved with its logic, functionality, and animations. If you are using dls.js, reference the attributes below for functionality.
| Attribute Name | Options | Description | Required |
|---|---|---|---|
data-toggle |
nav |
Creates a navigation object; required for dls.js functionality. | yes |
data-responsive |
true/false/sm/md/lg |
Updates layout from nav-horizontal to nav-vertical at specified breakpoint. Default is medium if input is true. | no |
data-overlay |
true/false |
Adds background overlay when nav menu is expanded. Default is false. | no |