Skip to content
Amplify from Studio 24
  • Get started
  • Fundamentals
  • Layout helpers
  • Core components
  • Advanced components
  • Design handover & standards

Demo: single-level navigation

  • Home
  • Services
  • Portfolio
  • About us
Back to navigation index

Considerations

Configuration of nav-single-level.js for this pattern:
Setting Description Option used for this pattern
breakpoint A number representing the viewport width in pixels at which the navigation toggle button will be hidden. Converted to em units in the script. Make sure that this ties up with the breakpoint values used in the CSS. 768
mobileIcon String for the SVG icon code used in the small screen navigation toggle button. Contains two path elements, one for the ‘open’ icon and one for the ‘close’ icon. CSS is used to change which path is shown depending on the aria-expanded state of the button. Default setting
© Studio 24