utkwdn / utkwds

The University of Tennessee, Knoxville Web Design System
4 stars 0 forks source link

Sidebar navigation #330

Open reasterbrooknc opened 3 months ago

rdelaude commented 2 months ago

Pattern default text:

Sidebar Navigation Use this pattern to place a dynamic sidebar menu onto pages that aren't included in the main navigation at the top of your site. The Sidebar Navigation auto-populates based on the nesting structure in your site's Main Navigation Menu: pages at the first two levels appear in the top menu on all pages, and pages at level three and below will continue into the Sidebar Navigation pattern if you place it at the top of a page.

Consistency is critical for navigation, so use it at the top of most pages that aren't in your main menu. Exceptions that might be nested at level three or below but don't tend to need sidebar navigation include collections many of like items ( e.g. a news archive or employee directory) and user task endpoints like fillable full-page forms.

Menu

Parent of Active Page Sibling of Active Page

Current Active Page

  • Child Page of Active Page
  • Child Page of Active Page
  • Child Page of Active Page Sibling of Active Page Sibling of Active Page

Thumbnail on https://brand.utk.edu/web-design-system/component-library/:

Sidebar Navigation

Text update on https://brand.utk.edu/web-design-system/general-guidelines/#layouts:

In the WordPress dashboard, select Appearance > Menus. Create a new menu named “Main Nav Menu,” and add top-level and next-level pages to it.

Move and nest pages in the menu structure interface until they match your desired site hierarchy. In Menu Settings, check the Display Location box for Main Nav Menu.

Finally, save your menu and confirm that it is appearing and functioning properly on your website.

The page hierarchy you build in Main Nav Menu will populate the menu at the top of your site for the first two levels of pages. For levels three and beyond, it will continue into the Sidebar Navigation pattern, which you should build into the top of most pages at level 3 and below to help users see and navigate your content.

rdelaude commented 1 month ago

Edit to the documentation parts of the above to better reflect functionality:

Sidebar Navigation For pages at level three and below in your site structure, use the Sidebar Navigation pattern as the first block at the top. This will place a dynamic sidebar menu onto the page to make sure users can access pages that aren’t included in the top-of-site menu,. The Sidebar Navigation pattern populates based on the structure you assign to each page in the “Parent” field, either inside the Page settings menu when creating or editing the page, or from the Quick Edit in the All Pages view of the dashboard.

Consistency is critical for navigation, so use it at the top of most pages that aren't in your main menu. Exceptions that might be nested at level three or below but don't tend to need sidebar navigation include collections of many like items ( e.g. a news archive or employee directory) and user task endpoints like fillable full-page forms.

Text update on https://brand.utk.edu/web-design-system/general-guidelines/#layouts :

In the WordPress dashboard, select Appearance > Menus. Create a new menu named exactly “Main Nav Menu,” and add top-level and next-level pages to match your desired site hierarchy. Save your menu and confirm that it is appearing and functioning properly on your website.

The page hierarchy you build in Main Nav Menu will populate the menu at the top of your site. To make sure users can access pages below those first two levels shown, use the Sidebar Navigation pattern as the first block at the top of pages that aren’t included in the top-of-site menu. The Sidebar Navigation pattern populates based on the structure you assign to each page in the “Parent” field, either inside the Page settings menu when creating or editing the page, or from the Quick Edit in the All Pages view of the dashboard.