Navigation

Primary with Advanced Dropdown

See above

The main navigation has quite a bit of content. Utilize the .hide-on-mobile class for content that should only display on desktop.

The .menu-toggle icon displays on smaller viewports to access the off-canvas navigation. This element must be placed directly above the <nav>.

Tabs

Tab Content 1

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.

Tab Content 2

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.

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.

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.

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.

Tab Content 4

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.

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.

The tab group must have a unique ID to ensure multiple tab groups on a single page work correctly. Wrap both the navigational <ul> and .tabs-container within a .tabs. Give the first navigation link and content block .is-active to initiate an active content block on page load. Give each tab content block a unique ID, and target the navigation links appropriately. The controlling javascript for tabs is located in main.js.

Microsite Sub-Navigation

This sub-navigation is simply a modifier of .main__navigation.

Department

This navigation is meant to be placed above a main navigation area, directly within a <header> element. Each menu item has a max-width of 25% to account for longer titles; by default, all items will squeeze into one line if there are more than 5.

For long menus, use the modifier class .sub-navigation--long.

Application Header

Application Headline

Supporting Content Sub Headline

Application Headline

This navigation uses the modifier class .main__navigation--portal

For external applications, the City Logo must link to the City's public site (www.sandiego.gov). For internal apps, the City Logo must link to the employee intranet site (CityNet).

Quick Nav

Visit sandiego.gov

This navigation is meant to be placed above a main navigation area, directly within a <header> element.

Social Media Icons

A list of social icons simply needs to be given the .socials class.

Refer to the Icon Library for additional social icons.

Tags