Navigational components

Accordion

Use to showcase loosely connected content for quick snapshots of info.
Great solution for FAQs.
Good for organizing related reference info.
Use icons when appropriate.
Don’t hide vital info within an accordion—eg, if it’s a registration page, don’t hide a link to the registration form under an accordion.
Don't place video content in an accordion.

Accordion example

What happens during microdermabrasion?

The dermatologist uses a handheld device that gently removes the top layer of skin. You may feel a sanding sensation, but this is not painful. It takes about 30 to 40 minutes to treat the entire face and about 20 minutes to treat the neck.

After the treatment, a moisturizer is applied.

What will I need to do after microdermabrasion?

You may need to apply a moisturizer or other skin care product at home.

You will be given a skin-care plan that includes sun protection. Protecting your skin form the sun helps ensure the best possible results and reduces the risk of side effects.

Accordion with icons example

Lorem ipsum dolor sit amet

Dignissim cras tincidunt lobortis feugiat vivamus. Cursus in hac habitasse platea. Imperdiet proin fermentum leo vel orci porta non pulvinar neque.

Scelerisque viverra mauris

Egestas integer eget aliquet nibh praesent tristique magna. Amet venenatis urna cursus eget nunc scelerisque viverra. Condimentum vitae sapien pellentesque habitant morbi. Vel orci porta non pulvinar neque.

Malesuada bibendum

Tempus egestas sed sed risus pretium. Eget magna fermentum iaculis eu non diam phasellus vestibulum.

All icons available for accordions:

All icons in the "Regular icons" section in the icons asset page are available for accordions.

Code library assets: https://assets.aad.org/html/Components/accordions.html

Inline or page tabs

Don’t hide essential info in the tabs.
Good use case: Short form of info about an award or event.
No video content in inline tabs.
Keep it short and sweet when it comes to content within these tabs, as the mobile experience suffers when the content gets too long.
The inline tabs are essentially same as the accordion: The information is sandwiched between boundaries.

Tab content 1

Tab content 2

Tab content 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pellentesque id nibh tortor id aliquet. Lacus viverra vitae congue eu consequat ac felis donec et. Mattis molestie a iaculis at erat pellentesque. Erat pellentesque adipiscing commodo elit. Ultrices gravida dictum fusce ut placerat orci. Imperdiet proin fermentum leo vel orci porta non. Imperdiet sed euismod nisi porta lorem mollis. In dictum non consectetur a erat nam at lectus. Eu nisl nunc mi ipsum faucibus vitae. Vel orci porta non pulvinar neque. Et pharetra pharetra massa massa ultricies mi quis. Massa ultricies mi quis hendrerit dolor. Non enim praesent elementum facilisis.

Tellus elementum sagittis vitae et leo. Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Eget duis at tellus at urna condimentum mattis. Pretium fusce id velit ut tortor pretium. Vitae et leo duis ut diam quam nulla porttitor. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Posuere morbi leo urna molestie at elementum eu facilisis sed.

Quisque sagittis purus sit amet volutpat consequat mauris nunc. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Lorem ipsum dolor sit amet consectetur adipiscing elit.

Code asset library: https://assets.aad.org/html/Components/inlinePageTabs.html

Linked tabs

Guides user through a series of actions
Presents topics that a user would like to access easily from a single place (eg, pages on psoriasis symptoms, treatments, tips on controlling). In other words: Linked tabs are for information that is on the same level of information hierarchy.
For horizontal, create or import in Linked Tabs component at top of article.
No more than 6 tabs for horizontal tabs.
For vertical, create or import in sidebar section.
Note: Linked tabs link individual pages. The tabs are simply a component that connects all the individual pages.

Vertical linked tabs

Horizontal linked tabs

Code library assets: https://assets.aad.org/html/Components/linkTabs.html

Secondary navigation

Secondary navigation is used only in very specific use cases, (such as the Meetings section in the member section and Diseases in Public section) that have their own information hierarchy structures and are too deep and wide to be supported by the main navigation alone.

It is called the secondary navigation because the global navigation is considered to be the primary navigation but in reality, it represents the 3rd level of information hierarchy.

This navigation should be used in very large sections of content only.

A very important note: This navigation does not appear in mobile at all. (There are plans to remedy this situation but when this is being written in March of 2020 those plans have not been put into process as of yet)

Due to this, you should make sure that the user can easily navigate these sections with mobile phone by using layers of landing pages to nest the content. To see an example of this, see how Public section pages for diseases are built.

Code library assets: https://assets.aad.org/html/Components/secondaryNav.html

Accordion icons all:

Advertiser

Advocacy

Alarm

Award

Calculator

Calendar

Camp

Certificate

Charity

CME

CME transcripts

Coding

Compound

Congress

Contact

Court house

Create login

Curriculum

Data

Quiz

Disabled

Discussion

Diversity

Donate

Download

E-prescription

Edit

Education

Education 2

EHR

Election

Error

Events

Exhibit hall

Exhibitor

Export

Facebook

Find a Dermatologist

FAQ

Find member

Flag

Flag 2

Future meetings

Gavel

Global

Global filled

Grid

Group meetings

Health education

Health insurance

Hospital

Hotel

Idea

Image

Important date

Interactive

Instagram

Investigate

JAAD Quiz

Job board

Legal

Link

List

Lock

Lotus

Mail

Media

Medical files

Medicine

Meeting

Meeting archive

Microscope

Mobile app

MOC

Notification

Ointment

Online learning

People

Phone

Podcast

Poll

Program

Public health

Publication

Publication 2

Question of the week

Read

Registration

Report

Scale

Search

Settings

Shade from sun

Shield

Signs

Special events

Students

Study

Summary

Syringe

Twitter

Umbrella