All themes

Sandbox Jekyll documentation

Navigation Configuration Guide

Explanation of the navigation.yml settings for the Sandbox Jekyll theme

main:
  - title: Demos
    type: mega-menu-img
    items:
      - title: Demo1
        url: /demo1/
        image: /assets/img/demos/mi1.webp
        image2x: /assets/img/demos/[email protected]
      - title: Demo2
        url: /demo2/
        image: /assets/img/demos/mi2.webp
        image2x: /assets/img/demos/[email protected]
  - title: Pages
    type: dropdown
    items:
      - title: About
        submenu:
          - title: About I
            url: /about/
          - title: About II
            url: /about2/
      - title: Services
        submenu:
          - title: Services I
            url: /services/
          - title: Services II
            url: /services2/

Multi-Column Dropdown (Projects)

  - title: Projects
    type: dropdown-columns
    items:
      - title: Project Pages
        submenu:
          - title: Projects I
            url: /projects-tiles/
      - title: Single Projects
        submenu:
          - title: Single Project I
            url: /projects/sample-with-slider/

Mega Menu with Icons (Blocks)

  - title: Blocks
    type: mega-menu-icon
    items:
      - title: Features
        url: /docs/blocks/features.html
        icon: /assets/img/demos/block8.svg
      - title: Contact
        url: /docs/blocks/contact.html
        icon: /assets/img/demos/block5.svg

Documentation Navigation Example

# Documentation Navigation Example
docs_navigation:
  - title: "Getting Started"
    url: "/docs/getting-started"
    children:
      - title: "Installation"
        url: "/docs/installation"
      - title: "Folder Structure"
        url: "/docs/folder-structure"

  - title: "Customization"
    url: "/docs/customization"
    children:
      - title: "Theme Configuration"
        url: "/docs/theme-config"
      - title: "Styling"
        url: "/docs/styling"

  - title: "Advanced"
    url: "/docs/advanced"
    children:
      - title: "Performance"
        url: "/docs/performance"
      - title: "SEO Optimization"
        url: "/docs/seo"

One-Page Navigation

One-Page Navigation Links

onepage:
  links:
    - text: Home
      url: "#home"
    - text: About
      url: "#about"
    - text: Services
      url: "#services"
    - text: Contact
      url: "#contact"

Below is a quick reference table summarizing the different navigation types supported in navigation.yml.

Navigation Type Description Example
Documentation Navigation Sidebar navigation specifically for documentation pages. type: docs
Mega Menu (Images) Displays large dropdown menus with images. type: mega-menu-img
Dropdown Menu A standard multi-level dropdown navigation. type: dropdown
Dropdown Columns Multi-column dropdown layout for structured navigation. type: dropdown-columns
Mega Menu (Icons) Displays UI blocks in a large dropdown with icons. type: mega-menu-icon
One-Page Navigation Links that scroll smoothly to different sections. onepage: links