Section Navigation Component

The goal of this task is to create a new section navigation component in the stable build of the design system.

Mockups

The full mockups can be viewed in Figma: https://www.figma.com/design/1eNREu4goozzabiuUhXvpS/detroitmi.gov-redesign?node-id=35-2393&t=FgpYMyZiFD6ry3yt-1

Mobile

Desktop

Requirements

• The width of the component (and component contents) should scale with the parent container
  • When the width of the viewport is smaller than 992px (large bootstrap breakpoint), the mobile design should be used.
  • Recommendation: Try to implement the mobile <> desktop transition using stylesheet media queries. If that doesn't work, try using ResizeObserver or window.matchMedia in Javascript instead.
• The individual skip links should be placed inside the section navigation using slots and custom web components (see https://shoelace.style/components/menu as an example of what the API should look like)
• Follow the best practices for attributes and slots described in Update component API to adhere to HTML standard microsyntaxes #201 , Simplify attribute naming conventions #202 , and Migrate to named slots with basic markup where possible #205