Navigation

Customize site navigational links through a Jekyll data file.

Masthead

The masthead links use a “priority plus” design pattern. Meaning, show as many navigation items that will fit horizontally with a toggle to reveal the rest.

To define these links add titles and URLs under the main_menu key in _data/navigation.yml:

main_menu:

  - text: "Home"
    url: "/"
    menu_type: "megamenu"
    submenu:

      - text: "Digital Startup"
        url: "/"

      - text: "Saas Landing"
        url: "/index-2"

      - text: "SEO Agency"
        url: "/index-3"

      - text: "Modern Business"
        url: "/index-4"

      - text: "Design Agency"
        url: "/index-5"

      - text: "App Presentation"
        url: "/index-6"

      - text: "Creative Landing"
        url: "/index-7"

      - text: "Marketing Startup"
        url: "/index-8"

      - text: "Digital Agency"
        url: "/index-9"

      - text: "Creative Business"
        url: "/index-10"

      - text: "Software Landing"
        url: "/index-11"

      - text: "App Landing"
        url: "/index-12"

      - text: "Creative Agency"
        url: "/index-13"

      - text: "Wedding Photography"
        url: "/index-14"

      - text: "Food Photography"
        url: "/index-15"

      - text: "Creative Onepage"
        url: "/index-16"

      - text: "Marketing Company"
        url: "/index-17"

      - text: "Startup Business"
        url: "/index-18"

      - text: "Creative Resume"
        url: "/index-19"

      - text: "Digital Studio"
        url: "/index-20"

      - text: "Travel Blog"
        url: "/index-21"

      - text: "Minimal Shop"
        url: "/index-22"

      - text: "Minimal Portfolio"
        url: "/index-23"

      - text: "Coming Soon"
        url: "/index-24"

      - text: "Personal Creative"
        url: "/index-25"

      - text: "Minimal Photography"
        url: "/index-26"

      - text: "Maintenance"
        url: "/index-27"

  - text: "Pages"
    url: "/"
    menu_type: "dropdown"
    level_two:
      - sub_menu_text: "Services"
        sub_menu:
          - text: "Service 01"
            url: "/services/index"

          - text: "Service 02"
            url: "/services/index-2"

          - text: "Service 03"
            url: "/services/index-3"

          - text: "Service 04"
            url: "/services/index-4"

          - text: "Service 05"
            url: "/services/index-5"

      - sub_menu_text: "About Us"
        sub_menu:
          - text: "About 01"
            url: "/about/about"

          - text: "About 02"
            url: "/about/about-2"

          - text: "About 03"
            url: "/about/about-3"

          - text: "About 04"
            url: "/about/about-4"

      - sub_menu_text: "Shop"
        sub_menu:
          - text: "Shop 01"
            url: "/shop/index"

          - text: "Shop 02"
            url: "/shop/index-2"

      - sub_menu_text: "Contact"
        sub_menu:
          - text: "Contact 01"
            url: "/contact/contact-1"

          - text: "Contact 02"
            url: "/contact/contact-2"

          - text: "Contact 03"
            url: "/contact/contact-3"

          - text: "Contact 04"
            url: "/contact/contact-4"
    level_one:
      - text: "FAQ"
        url: "/faq"

      - text: "Page Loading "
        url: "/loading"

      - text: "Page Scrolling"
        url: "/scroll"

  - text: "Elements"
    url: "/"
    menu_type: "megamenu"
    submenu:

      - text: "Accordion"
        url: "/elements/accordion"

      - text: "Dividers"
        url: "/elements/dividers"

      - text: "Lightbox"
        url: "/elements/lightbox"

      - text: "Tabs"
        url: "/elements/tabs"

      - text: "Alerts"
        url: "/elements/alerts"

      - text: "Dropcap"
        url: "/elements/dropcap"

      - text: "Lists"
        url: "/elements/lists"

      - text: "Team"
        url: "/elements/team"

      - text: "Animated Text"
        url: "/elements/animated_text"

      - text: "Forms"
        url: "/elements/forms"

      - text: "Media Player"
        url: "/elements/media_player"

      - text: "Testimonials"
        url: "/elements/testimonials"

      - text: "Blockquote"
        url: "/elements/blockquote"

      - text: "Buttons & Badges"
        url: "/elements/buttons_badges"

      - text: "Call to Action"
        url: "/elements/call_to_action"

      - text: "Carousel"
        url: "/elements/carousel"

      - text: "Clients"
        url: "/elements/clients"

      - text: "Countdown"
        url: "/elements/countdown"

      - text: "Counter"
        url: "/elements/counter"

      - text: "Icons - Concept"
        url: "/elements/icons_concept"

      - text: "Icons - Jam"
        url: "/elements/icons_jam"

      - text: "Icons - Icofont"
        url: "/elements/icons_icofont"

      - text: "Icons - Lineal"
        url: "/elements/icons_lineal"

      - text: "Icon Box"
        url: "/elements/icon_box"

      - text: "Image Hover"
        url: "/elements/image_hover"

      - text: "Image Mask"
        url: "/elements/icons_image_mask"

      - text: "Modal"
        url: "/elements/modal"

      - text: "Pricing Tables"
        url: "/elements/pricing"

      - text: "Process Steps"
        url: "/elements/process_steps"

      - text: "Progress Bar"
        url: "/elements/progress_bar"

      - text: "Scroll Animations"
        url: "/elements/scroll_animations"

      - text: "Social Icons"
        url: "/elements/social_icons"

      - text: "Tables"
        url: "/elements/tables"

      - text: "Titles"
        url: "/elements/titles"

      - text: "Toggle"
        url: "/elements/toggle"

      - text: "Tooltip & Popover"
        url: "/elements/tooltip_popover"

      - text: "Typography"
        url: "/elements/typography"

      - text: "Video Popup"
        url: "/elements/video_popup"

      - text: "Waves"
        url: "/elements/waves"

      - text: "Wrappers"
        url: "/elements/wrappers"

  - text: "Portfolio"
    url: "/portfolios/"
    level_one:
      - text: "Grid Portfolio"
        url: "/portfolios/grid-portfolio"

      - text: "Grid Portfolio With Details"
        url: "/portfolios/grid-portfolio-details"

      - text: "Masonry Portfolio"
        url: "/portfolios/masonry-portfolio"

      - text: "Masonry Portfolio With Details"
        url: "/portfolios/masonry-portfolio-details"

      - text: "Mosaic Portfolio"
        url: "/portfolios/mosaic-portfolio"

      - text: "Full Screen Grid Portfolio"
        url: "/portfolios/fullscreen-grid"

      - text: "Portfolio With Item Details"
        url: "/portfolios/portfolio-item-details"

      - text: "Box Portfolio With Item Details"
        url: "/portfolios/box-item-details"
    level_two:
      - sub_menu_text: "Portfolio Posts"
        sub_menu:
          - text: "Post with multiple images"
            url: "/portfolios/with-multiple-images"
          - text: "Post with slider"
            url: "/portfolios/with-slider"
          - text: "Post with masonry gallery"
            url: "/portfolios/with-masonry"
          - text: "Post with carousel"
            url: "/portfolios/with-columns"
          - text: "Post with columns"
            url: "/portfolios/with-carousel"
          - text: "Post with video"
            url: "/portfolios/with-video"

  - text: "Blog"
    url: "/blogs/index"
    menu_type: "dropdown"
    level_one:
      - text: "Classic Grid"
        url: "/blogs/index"

      - text: "Classic Grid With Sidebar"
        url: "/blogs/index-2"

      - text: "Box Grid Blog"
        url: "/blogs/index-3"

      - text: "Box Grid Blog With Sidebar"
        url: "/blogs/index-4"

      - text: "Classic Blog"
        url: "/blogs/index-5"

      - text: "Classic Blog with Sidebar"
        url: "/blogs/index-6"

      - text: "Boxed Classic Blog"
        url: "/blogs/index-7"

      - text: "Boxed Classic Blog With Sidebar"
        url: "/blogs/index-8"
    level_two:
      - sub_menu_text: "Blog Posts"
        sub_menu:
          - text: "Post with sidebar"
            url: "/posts/simple-post-with-sidebar"
          - text: "Post with no sidebar"
            url: "/posts/simple-post-with-no-sidebar"
          - text: "Box Post with no sidebar"
            url: "/posts/post-boxed"
          - text: "Box Post with sidebar"
            url: "/posts/post-boxed-sidebar"
          - text: "Post with code highlight"
            url: "/posts/post-with-code-highlight"
          - text: "Post with video"
            url: "/posts/post-with-video"
          - text: "Post with image"
            url: "/posts/post-with-image"
          - text: "Post with carousel"
            url: "/posts/post-with-carousel"
          - text: "Post with gallery"
            url: "/posts/post-with-gallery"

There are 11 versions of navigation files.

Including navigation method

Simple method

One way to include the naviagtion is to reference like the below code:

Navigation image file

# index.html
{% include nav/nav-1.html light_logo="true" %}

Advanced method

There are 11 type of navigation.

Style 1

Use the below front matter in your code:

classic_nav: true

Style 2

Use the below front matter in your code:

classic_light_nav: true

Style 3

Use the below front matter in your code:

dark_nav: true

Style 4

Use the below front matter in your code:

top_nav: true

Style 5

Use the below front matter in your code:

wide_nav: true

Style 6

Use the below front matter in your code:

extended_nav: true

Style 7

Use the below front matter in your code:

fancy_light_nav: true

Style 8

Use the below front matter in your code:

fancy_dark_nav: true

Style 9

Use the below front matter in your code:

centered_nav: true

Style 10

Use the below front matter in your code:

simple_nav: true

ProTip: Put the most important links first so they’re always visible and not hidden behind the menu toggle.