Virginia Tech® home

VTx For the Media subnav configuration

The For the Media section of the VTx site has its own subnav. It is inherited via the footer drop zone to all child pages, and uses a class to trigger its detachment and placement at the top of the content area.

The following information will help recreate the subnav here, or with different text and paths assigned be used somewhere else within the site.

The For the Media navigation consists of a Container component with a Text and List component inside it.

For the media navigation components, container with text and navigation component inside
For the media navigation components, container with text and navigation component inside

Clicking the Container component and then the Configure (wrench) icon. There is a vt-for-the-media-subnav class applied to the CSS Class field.

For the media navigation Container component properties; vt-for-the-media-subnav class added
For the media navigation Container component properties; vt-for-the-media-subnav class added

The Text component has a single Heading 2 (<H2>) line in it.

There is a class applied to this component: vt-for-the-media-subnav-headingĀ 

For the media navigation Text component properties; vt-for-the-media-subnav-heading class added
For the media navigation Text component properties; vt-for-the-media-subnav-heading class added

The Navigation component configuration is fairly simple. There is a class applied under the Title and Options tab: vt-for-the-media-subnav-menu

For the media navigation Navigation component Title and Options properties; vt-for-the-media-subnav-menu class added
For the media navigation Navigation component Title and Options properties; vt-for-the-media-subnav-menu class added

The Navigation component Navigation Options have an ARIA label to better describe the context of the linked items, the starting page is set to the location of the main for-the-media.html page with depth and sort setttings apprpriately set for this specific usage on the VTx site.

For the media navigation Navigation component Navigation Options properties; ARIA label, Starting Page, Depth, and order settings
For the media navigation Navigation component Navigation Options properties; ARIA label, Starting Page, Depth, and order settings