Dropdown Nav

A versatile navigation component designed for use as a site’s primary menu
---
block:
  logo:
    link: '#'
    image: /assets/images/logo.svg
    dark_image: /assets/images/logo-dark.svg
    alt: Example Logo
  grouping: none
  nav:
    - name: Features
      link: null
      subnav:
        - name: Collaboration Tools
          link: '#'
          icon:
            alt: null
            name: users
            color: blue
            background: null
          description: Streamline teamwork with intuitive tools.
        - name: Automation
          link: '#'
          icon:
            alt: null
            name: cog
            color: blue
            background: null
          description: Automate repetitive tasks and save time.
        - name: Advanced Analytics
          link: '#'
          icon:
            alt: null
            name: chart-bar
            color: blue
            background: null
          description: Get insights with data-driven analytics.
        - name: Mobile App
          link: '#'
          icon:
            alt: null
            name: device-phone-mobile
            color: blue
            background: null
          description: Access tools on the go with our mobile app.
    - name: Customers
      link: '#'
      subnav: null
    - name: Resources
      link: null
      subnav:
        - name: Blog
          link: '#'
          icon:
            alt: null
            name: null
            color: null
            background: null
          description: Stay updated with the latest insights.
        - name: Guides & Ebooks
          link: '#'
          icon:
            alt: null
            name: null
            color: null
            background: null
          description: Download in-depth guides and ebooks.
        - name: Help Center
          link: '#'
          icon:
            alt: null
            name: null
            color: null
            background: null
          description: Find answers to your questions.
        - name: Webinars
          link: '#'
          icon:
            alt: null
            name: null
            color: null
            background: null
          description: Join our expert-led live sessions.
    - name: Pricing
      link: '#'
      subnav: null
  button_group:
    gap: null
    button_blocks:
      - _bookshop_name: elements/button
        label: Search
        icon:
          display_mode: icon_only
          position: null
          name: magnifying-glass
        size: null
        type: ghost
        outline: false
      - _bookshop_name: elements/button
        label: Login
        icon:
          display_mode: null
          position: null
          name: null
        size: null
        type: ghost
        outline: false
      - _bookshop_name: elements/button
        label: Sign Up
        icon:
          display_mode: null
          position: null
          name: null
        size: null
        type: primary
        outline: false
---
<div class="nav-wrapper">
  <div class="nav-wrapper--mobile">
    {% bookshop "layouts/mobile-nav" bind: block  %}
  </div>

  <div class="nav-wrapper--desktop">
    {% bookshop "layouts/dropdown-nav" bind: block  %}
  </div>
</div>

Properties

groupingenum

logo-group
button-group

logoobject

linkstring

imagestring

dark_imagestring

altstring

navobject

namestring

linkstring

subnavobject

namestring

linkstring

descriptionstring

iconobject

namestring

The name of the icon

altstring

A text description of the icon

colorenum

The color of the icon

font-color
red
orange
yellow
green
cyan
blue
purple
pink

backgroundboolean

Whether to have a background

button-groupobject

button_blocksobject array

An array of button objects

gapenum

The spacing between buttons

none
xs
s
m
l
xl
2xl

Examples

Button Group

---
block:
  logo:
    link: '#'
    image: /assets/images/logo.svg
    dark_image: /assets/images/logo-dark.svg
    alt: Example Logo
  grouping: button-group
  nav:
    - name: Features
      link: null
      subnav:
        - name: Collaboration Tools
          link: '#'
          icon:
            alt: null
            name: users
            color: gray
            background: null
          description: Streamline teamwork with intuitive tools.
        - name: Automation
          link: '#'
          icon:
            alt: null
            name: cog
            color: gray
            background: null
          description: Automate repetitive tasks and save time.
        - name: Advanced Analytics
          link: '#'
          icon:
            alt: null
            name: chart-bar
            color: gray
            background: null
          description: Get insights with data-driven analytics.
        - name: Mobile App
          link: '#'
          icon:
            alt: null
            name: device-phone-mobile
            color: gray
            background: null
          description: Access tools on the go with our mobile app.
    - name: Customers
      link: '#'
      subnav: null
    - name: Resources
      link: null
      subnav:
        - name: Blog
          link: '#'
          icon:
            alt: null
            name: null
            color: null
            background: null
          description: Stay updated with the latest insights.
        - name: Guides & Ebooks
          link: '#'
          icon:
            alt: null
            name: null
            color: null
            background: null
          description: Download in-depth guides and ebooks.
        - name: Help Center
          link: '#'
          icon:
            alt: null
            name: null
            color: null
            background: null
          description: Find answers to your questions.
        - name: Webinars
          link: '#'
          icon:
            alt: null
            name: null
            color: null
            background: null
          description: Join our expert-led live sessions.
    - name: Pricing
      link: '#'
      subnav: null
  button_group:
    gap: null
    button_blocks:
      - _bookshop_name: elements/button
        label: Search
        icon:
          display_mode: icon_only
          position: null
          name: magnifying-glass
        size: null
        type: ghost
        outline: false
      - _bookshop_name: elements/button
        label: Login
        icon:
          display_mode: null
          position: null
          name: null
        size: null
        type: ghost
        outline: false
      - _bookshop_name: elements/button
        label: Sign Up
        icon:
          display_mode: null
          position: null
          name: null
        size: null
        type: primary
        outline: false
---
<div class="nav-wrapper">
  <div class="nav-wrapper--mobile">
    {% bookshop "layouts/mobile-nav" bind: block  %}
  </div>

  <div class="nav-wrapper--desktop">
    {% bookshop "layouts/dropdown-nav" bind: block  %}
  </div>
</div>

Logo Group

---
block:
  logo:
    link: '#'
    image: /assets/images/logo.svg
    dark_image: /assets/images/logo-dark.svg
    alt: Example Logo
  grouping: logo-group
  nav:
    - name: Features
      link: null
      subnav:
        - name: Collaboration Tools
          link: '#'
          icon:
            alt: null
            name: users
            color: purple
            background: null
          description: Streamline teamwork with intuitive tools.
        - name: Automation
          link: '#'
          icon:
            alt: null
            name: cog
            color: purple
            background: null
          description: Automate repetitive tasks and save time.
        - name: Advanced Analytics
          link: '#'
          icon:
            alt: null
            name: chart-bar
            color: purple
            background: null
          description: Get insights with data-driven analytics.
        - name: Mobile App
          link: '#'
          icon:
            alt: null
            name: device-phone-mobile
            color: purple
            background: null
          description: Access tools on the go with our mobile app.
    - name: Customers
      link: '#'
      subnav: null
    - name: Resources
      link: null
      subnav:
        - name: Blog
          link: '#'
          icon:
            alt: null
            name: null
            color: null
            background: null
          description: Stay updated with the latest insights.
        - name: Guides & Ebooks
          link: '#'
          icon:
            alt: null
            name: null
            color: null
            background: null
          description: Download in-depth guides and ebooks.
        - name: Help Center
          link: '#'
          icon:
            alt: null
            name: null
            color: null
            background: null
          description: Find answers to your questions.
        - name: Webinars
          link: '#'
          icon:
            alt: null
            name: null
            color: null
            background: null
          description: Join our expert-led live sessions.
    - name: Pricing
      link: '#'
      subnav: null
  button_group:
    gap: null
    button_blocks:
      - _bookshop_name: elements/button
        label: Search
        icon:
          display_mode: icon_only
          position: null
          name: magnifying-glass
        size: null
        type: ghost
        outline: false
      - _bookshop_name: elements/button
        label: Login
        icon:
          display_mode: null
          position: null
          name: null
        size: null
        type: ghost
        outline: false
      - _bookshop_name: elements/button
        label: Sign Up
        icon:
          display_mode: null
          position: null
          name: null
        size: null
        type: primary
        outline: false
---
<div class="nav-wrapper">
  <div class="nav-wrapper--mobile">
    {% bookshop "layouts/mobile-nav" bind: block  %}
  </div>

  <div class="nav-wrapper--desktop">
    {% bookshop "layouts/dropdown-nav" bind: block  %}
  </div>
</div>

No Dropdowns

---
block:
  logo:
    link: '#'
    image: /assets/images/logo.svg
    dark_image: /assets/images/logo-dark.svg
    alt: Example Logo
  grouping: button-group
  nav:
    - name: About
      link: '#'
      subnav: null
    - name: Services
      link: '#'
      subnav: null
    - name: Portfolio
      link: null
      subnav: null
    - name: Contact
      link: '#'
      subnav: null
  button_group:
    gap: null
    button_blocks:
      - _bookshop_name: elements/button
        label: Search
        icon:
          display_mode: icon_only
          position: null
          name: magnifying-glass
        size: null
        type: ghost
        outline: false
---
<div class="nav-wrapper">
  <div class="nav-wrapper--mobile">
    {% bookshop "layouts/mobile-nav" bind: block  %}
  </div>
  <div class="nav-wrapper--desktop">
    {% bookshop "layouts/dropdown-nav" bind: block  %}
  </div>
</div>

All Dropdowns

---
block:
  logo:
    link: '#'
    image: /assets/images/logo.svg
    dark_image: /assets/images/logo-dark.svg
    alt: University Logo
  grouping: logo-group
  nav:
    - name: Admissions
      link: '#'
      subnav:
        - name: Undergraduate Admissions
          link: '#'
          icon: academic-cap
          description: Learn about our application process.
        - name: Graduate Admissions
          link: '#'
          icon: book-open
          description: Explore graduate studies and apply to our programs.
        - name: International Students
          link: '#'
          icon: globe-alt
          description: Guidance for international applicants.
        - name: Financial Aid
          link: '#'
          icon: currency-dollar
          description: Explore scholarships, grants, and financial aid options.
    - name: Academics
      link: '#'
      subnav:
        - name: Undergraduate Programs
          link: '#'
          icon: circle-stack
          description: Browse our undergraduate courses.
        - name: Graduate Programs
          link: '#'
          icon: academic-cap
          description: Advance your career with our graduate degrees.
        - name: Online Learning
          link: '#'
          icon: computer-desktop
          description: Online courses for distance learners.
        - name: Libraries
          link: '#'
          icon: book-open
          description: Access the university’s library resources.
    - name: Campus Life
      link: '#'
      subnav:
        - name: Housing & Dining
          link: '#'
          icon: home
          description: Student accommodations and meal plans.
        - name: Student Organizations
          link: '#'
          icon: users
          description: Join one of our student-led organizations.
        - name: Health & Wellness
          link: '#'
          icon: heart
          description: Health support services.
        - name: Athletics
          link: '#'
          icon: fire
          description: Sports programs and events.
  button_group:
    gap: null
    button_blocks:
      - _bookshop_name: elements/button
        label: Apply Now
        icon:
          display_mode: null
          position: null
          name: academic-cap
        size: null
        type: primary
        outline: false
---
<div class="nav-wrapper">
  <div class="nav-wrapper--mobile">
    {% bookshop "layouts/mobile-nav" bind: block  %}
  </div>

  <div class="nav-wrapper--desktop">
    {% bookshop "layouts/dropdown-nav" bind: block  %}
  </div>
</div>