Portland Community College | Portland, Oregon Portland Community College

Horizontal navigation

*Note: This navigation type is for approved websites only.

The horizontal navigation includes top-level pages for the current site. Dropdown menus show second-level child pages (if available), but not third-level and lower. The links are constant for all pages in the site – they doesn’t change to reflect current sibling-level pages like the sidebar.

Development info

  • Stylesheet location: /source-v6/styles/layout/_header.scss
  • HorizontalNav template property
    • Default value: off – doesn’t include the horizontal navigation
    • Alternate value: on – includes the horizontal navigation (get approval to use)

Styling

The horizontal navigation matches the page title color (sapphire), and any dropdown menus are turquoise.

Responsive behavior

This navigation collapses into a hamburger menu icon on small screens, with the current site’s name included in the icon label.

Desktop view

horizontal site-specific navigation: desktop

Horizontal nav with dropdown expanded

Phone view
horizontal site-specific navigation: phone
horizontal site-specific navigation: phone (expanded dropdown menu)
horizontal site-specific navigation: phone (expanded dropdown menu, second level)