Jump Menu

User Story
As a site editor, I would like the ability to create a horizontal style menu that jump-links to content on a landing or progam page to allow for longer pages with efficient navigation and to minimize the number of sub-pages.
Summary
A menu of jump links based on the nodes on a page. After saving a page with content, the menu would allow users to select the content they want to link to. The menu is responsive, turning to a hamburger on smaller screen sizes.
Design Notes

Ideally, the menu sticks to the top of the page when scrolling. This will need MUCH more discussion as a 'sticky' element may have tangential issue with other items on the top of the page.

Mock ups
""
""
""
Technical Notes

<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
 <div class="container-fluid">
   <a class="navbar-brand" href="#">On This Page</a>
   <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
   <div class="navbar-collapse collapse show" id="navbarNav" style="">
     <ul class="navbar-nav">
       <li class="nav-item">
         <a class="nav-link" aria-current="page" href="/brand/standards#paragraph-1279">Colleges</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="/brand/standards#paragraph-1299">Colors</a>
       </li>        
<li class="nav-item">
         <a class="nav-link" aria-current="page" href="/brand/standards#paragraph-1275">Logos</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="/brand/standards#paragraph-1300">Fonts</a>
       </li>
       <li class="nav-item">
         <a class="nav-link">Merchandise</a>
       </li>
       <li class="nav-item">
         <a class="nav-link">Advertising</a>
       </li>
       <li class="nav-item">
         <a class="nav-link">Photography</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="/brand/standards#paragraph-1304">Other Resources</a>
       </li>    
     </ul>
   </div>
 </div>
</nav>

JIRA
https://maricopacc.atlassian.net/browse/WEB-1501
Tasks Checklist
  • Design
  • Development
  • Theme
  • UAT/Review
  • Knowledge Base
  • Deployment
Status
Done
Category
Paragraph
Approved
Yes