Layout: Sidebar with Navigation List

less than 1 minute read

This post has a custom navigation list set in the post’s YAML Front Matter.

sidebar:
  title: "Sample Title"
  nav: sidebar-sample

Along with navigation elements set in _data/navigation.yml.

sidebar-sample:
  - title: "Parent Page A"
    children:
      - title: "Child Page A1"
        url: /
      - title: "Child Page A2"
        url: /
      - title: "Child Page A3"
        url: /
      - title: "Child Page A4"
        url: /
  - title: "Parent Page B"
    children:
      - title: "Child Page B1"
        url: /
      - title: "Child Page B2"
        url: /
      - title: "Child Page B3"
        url: /
      - title: "Child Page B4"
        url: /
      - title: "Child Page B5"
        url: /
  - title: "Parent Page C"
    children:
      - title: "Child Page C1"
        url: /
      - title: "Child Page C2"
        url: /
      - title: "Child Page C3"
        url: /
      - title: "Child Page C4"
        url: /
      - title: "Child Page C5"
        url: /
  - title: "Parent Page D"
    children:
      - title: "Child Page D1"
        url: /
      - title: "Child Page D2"
        url: /

Updated:

Comments

Josh

Is there a way to have a sidebar link jump to a particular part of the current page? I have a long post that I want to let a viewer jump to different parts without creating separate pages.

Michael Rose

@Josh Kramdown auto creates id’s on all of your page headlines in a post which you could use for this purpose. If you look at the source on this page you’ll see what I mean. For example the first heading named Header one:

<h1 id="header-one">Header one</h1>

If you added url: "#header-one" to your sidebar nav YAML it would jump to that anchor because of what is set on the id attribute.

You can also insert your own anchors with <a name="whatever-you-want"> and target the same way… #whatever-you-want.

There’s also several JavaScript solutions out there to things like this too.

Leave a comment

Your email address will not be published. Required fields are marked *

Loading...