Navigation sections

Navigation Sections

Show navigation links in various layouts.

Directory

Show links from a menu in a row.

Settings

  • Menu – choose a menu (you can edit navigation menus in the Shopify admin’s Online store > Navigation section); this section has limited support for dropdown items
  • Text alignment – set the text alignment for the navigation links (left, right or center)
  • Color scheme – choose a color scheme (learn more about Color schemes)

Show links from a menu in a featured section.

Settings

  • Menu – choose a menu (you can edit navigation menus in the Shopify admin’s Online store > Navigation section); this section does not support dropdown items
  • Text size – mobile – choose a text size to use on mobile devices (learn more about Text sizes)
  • Text size – desktop – choose a text size to use on desktop devices (learn more about Text sizes)
  • Display – choose the layout of the links: List, Paragraph, or List on mobile and Paragraph on desktop
  • Paragraph word separator – choose a symbol to separate the links when displaying in paragraph mode (hyphen, em dash, dot or bullet)
  • Superscript – choose to decorate the links with their index (pre) or the product count if the link’s destination is a collection (post)
  • Text alignment – set the text alignment for the navigation links (left, right or center)
  • Show menu images on hover – show an image overlay on hover; Baseline will automatically try to infer the correct image based on the link destination (e.g., for a link to a Collection, the Collection’s Featured image will be shown or, if absent, the first product’s Featured image, etc.)
  • Color scheme – choose a color scheme (learn more about Color schemes)

Show links from a menu side-by-side with an image.

Settings

  • Menu – choose a menu (you can edit navigation menus in the Shopify admin’s Online store > Navigation section); this section does not support dropdown items
  • Text size – mobile – choose a text size to use on mobile devices (learn more about Text sizes)
  • Text size – desktop – choose a text size to use on desktop devices (learn more about Text sizes)
  • Text alignment – set the text alignment for the navigation links (left, right or center)
  • Text position – set the text’s vertical position relative to the image (top, bottom or middle)
  • Show menu images on hover – replace the section’s image on hover; Baseline will automatically try to infer the correct image based on the link destination (e.g., for a link to a Collection, the Collection’s Featured image will be shown or, if absent, the first product’s Featured image, etc.)
  • Superscript – choose to decorate the links with their index (pre) or the product count if the link’s destination is a collection (post)

Image

  • Image
  • Image position on desktop – place the image on the right or on the left
  • Image size on desktop – set the relative size of the image on desktop
  • Fit image to text – shrink or expand the image’s height to match the text (on desktop)
  • Indent image – offset the image with margins on all sides

Color

  • Color scheme – choose a color scheme (learn more about Color schemes)

Single level navigation

Show links in a row.

Settings

  • Menu – choose a menu (you can edit navigation menus in the Shopify admin’s Online store > Navigation section); this section does not support dropdown items
  • Text alignment – set the text alignment for the navigation links (left, right or center)
  • Color scheme – choose a color scheme (learn more about Color schemes)
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.