Mobile Nav

A navigation component that's optimized for small screens
---
block:
  _bookshop_name: layouts/mobile-nav
  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: users
          description: Streamline teamwork with intuitive tools.
        - name: Automation
          link: '#'
          icon: cog
          description: Automate repetitive tasks and save time.
        - name: Advanced Analytics
          link: '#'
          icon: chart-bar
          description: Get insights with data-driven analytics.
        - name: Mobile App
          link: '#'
          icon: device-phone-mobile
          description: Access tools on the go with our mobile app.
    - name: Customers
      link: '#'
      subnav: null
    - name: Resources
      link: null
      subnav:
        - name: Blog
          link: '#'
          icon: null
          description: Stay updated with the latest insights.
        - name: Guides & Ebooks
          link: '#'
          icon: null
          description: Download in-depth guides and ebooks.
        - name: Help Center
          link: '#'
          icon: null
          description: Find answers to your questions.
        - name: Webinars
          link: '#'
          icon: 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
        options:
          layout: null
          size: null
          type: ghost
          outline: false
        icon:
          name: magnifying-glass
          options:
            display_mode: icon_only
            position: null
      - _bookshop_name: elements/button
        label: Login
        options:
          layout: null
          size: null
          type: ghost
          outline: false
        icon:
          name: null
          options:
            display_mode: null
            position: null
      - _bookshop_name: elements/button
        label: Sign Up
        options:
          layout: null
          size: null
          type: primary
          outline: false
        icon:
          name: null
          options:
            display_mode: null
            position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

Properties

logoobject

linkstring

imagestring

dark_imagestring

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

backgroundcheckbox

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

No Dropdowns

---
block:
  _bookshop_name: layouts/mobile-nav
  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
        options:
          layout: null
          size: null
          type: ghost
          outline: false
        icon:
          name: magnifying-glass
          options:
            display_mode: icon_only
            position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

All Dropdowns

---
block:
  _bookshop_name: layouts/mobile-nav
  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
        options:
          layout: null
          size: null
          type: primary
          outline: false
        icon:
          name: academic-cap
          options:
            display_mode: null
            position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}