Layout: Sidebar with Navigation List
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: /
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:
If you added
url: "#header-one"to your sidebar nav YAML it would jump to that anchor because of what is set on theidattribute.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 *