Components:

• Brand/Logo/Home
• Menu - horizontal on desktop, panel with stacked items on mobile
• Toggle Button - open and close the menu when it may be hidden

Each has three independent states. Only common state is "hidden"

The page has multiple states

• Detectable by classes applied via JavaScript
  • Unscrolled - scrolled to the very top of the page beneath some threshold
  • Scrolled - scrolled down, beyond some threshold
    • Scrolled up - most recently scrolled up toward the top
    • Scroll down - most recently scrolled down toward the bottom
  • Untoggled - the toggle button has not been clicked (or has been toggled off)
  • Toggled - the toggle button has been clicked
• Detectable by media query
  • Desktop
  • Mobile

The states of the components are applied according to the page’s state:

Note that for mobile, the "unscrolled" state applies to both unscrolled and scrolled + scrolled up, where for desktop unscrolled means only scrolled to the top.