# Section Page with Subpages and Navigation

**URL:** <https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902>\
**Category:** support\
**Created:** [May 9, 2018, 11:59am UTC](https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902 "2018-05-09T11:59:41Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![fenleyfen](https://avatars.discourse-cdn.com/v4/letter/f/a87d85/32.png) [@fenleyfen](https://discourse.gohugo.io/u/fenleyfen)\
**Post date:** [May 9, 2018, 11:59am UTC](https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902/1 "2018-05-09T11:59:41Z")

</div>

Hello everyone,

I’m working with Hugo since yesterday and love it so far. There’s only one thing where I need help, after reading the documentation.

My page structure:

```
_index.md
/about 
   ---
/posts
  --- first-post.md
  --- second-post.md
  --- third-post.md
/research
 ---- index.md
 ---- publications.md
 ---- teaching.md
 ---- code.md

```

My problem relates to /research. Within that section, I like to have a research index page that has an introduction. Below the introduction should be a navigation to all sub-pages: publications (active on /research and when publications.md is active), teaching, code. Ideally, content from publications is already shown on the default research page so that users see this without click. As shown, I like to have all possible content in \*.md files.

Example for /research:

```
Research Introduction

**Publications** Teaching Code

*Publication List*

```

Example for Teaching clicked:

```
Research Introduction

Publications **Teaching** Code

*Teaching Statement*

```

Basically like a tabbed nav, just with static pages.

Can someone help me figure out how to set the `type:`, `layout:` and layout files so that the functions described above would work ?

Thanks!

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [May 9, 2018, 12:26pm UTC](https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902/2 "2018-05-09T12:26:16Z")

</div>

> [@fenleyfen](#):
>
> ```auto
> /research
> ---- index.md
> ---- publications.md
> ---- teaching.md
> ---- code.md
> 
> ```
> 
> My problem relates to /research. Within that section, I like to have a research index page that has an introduction. Below the introduction should be a navigation to all sub-pages

You need to rename that `index.md` to `_index.md`. As it stands, what you have defined is a leaf bundle. So the sub-pages don’t get their own permalink. So you don’t get the highlighting in the nav bar as you want. By doing that rename, you make it a branch bundle, and you can then do everything that you described.

Read up on page bundles in the documentation.

---

<div class="post-metadata">

**Author:** ![fenleyfen](https://avatars.discourse-cdn.com/v4/letter/f/a87d85/32.png) [@fenleyfen](https://discourse.gohugo.io/u/fenleyfen)\
**Post date:** [May 9, 2018, 2:24pm UTC](https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902/3 "2018-05-09T14:24:17Z")

</div>

I tried but it only shows an empty page? Restarted server, flushed cache… /publications etc now returns 404 page not found. I also checked [https://gohugo.io/content-management/page-bundles/#examples-of-branch-bundle-organization](https://gohugo.io/content-management/page-bundles/#examples-of-branch-bundle-organization)

Do I need to assign a special layout or type to \_index.md?

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [May 9, 2018, 2:30pm UTC](https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902/4 "2018-05-09T14:30:27Z")

</div>

> [@fenleyfen](#):
>
> /publications etc now returns 404 page not found

Given the content organization you showed, the link should be [https://localhost:1313/research/publications/](https://localhost:1313/research/publications/).

But cannot say that for sure – You will need to share your site source.

---

<div class="post-metadata">

**Author:** ![fenleyfen](https://avatars.discourse-cdn.com/v4/letter/f/a87d85/32.png) [@fenleyfen](https://discourse.gohugo.io/u/fenleyfen)\
**Post date:** [May 9, 2018, 2:34pm UTC](https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902/5 "2018-05-09T14:34:04Z")

</div>

That was the mistake. It looks I also had to copy the \_default layout and assign a layout.

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [May 9, 2018, 2:37pm UTC](https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902/6 "2018-05-09T14:37:59Z")

</div>

> [@fenleyfen](#):
>
> I also had to copy the \_default layout and assign a layout.

You don’t **have too** assign a layout… if you have `single.html` and `list.html` in your `layouts/_default/`, they will apply by default e.g. your `content/research/_index.md` will be rendered by `layouts/_default/list.html` and your `content/research/publications.md` will be rendered by `layouts/_default/single.html` (given that you **don’t specify the `type` and `layout`** in the front-matter of those content files).

---

<div class="post-metadata">

**Author:** ![fenleyfen](https://avatars.discourse-cdn.com/v4/letter/f/a87d85/32.png) [@fenleyfen](https://discourse.gohugo.io/u/fenleyfen)\
**Post date:** [May 9, 2018, 2:38pm UTC](https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902/7 "2018-05-09T14:38:31Z")

</div>

Solved that part. The only question is how I can now list the subpages in a menu? I looked at [https://gohugo.io/templates/menu-templates/](https://gohugo.io/templates/menu-templates/) but found that it changed the top header. Is there some other way?

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [May 9, 2018, 2:41pm UTC](https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902/8 "2018-05-09T14:41:14Z")

</div>

> [@fenleyfen](#):
>
> how I can now list the subpages in a menu?

Use `{{ range .Pages }}` in the list template:

> **[Lists of content in Hugo](https://gohugo.io/templates/lists/)**
>
> Lists have a specific meaning and usage in Hugo when it comes to rendering your site homepage, section page, taxonomy list, or taxonomy terms list.

_The docs need to be updated… they mention `.Data.Pages`… but the “.Data” in there is redundant. Just `.Pages` works._

---

<div class="post-metadata">

**Author:** ![fenleyfen](https://avatars.discourse-cdn.com/v4/letter/f/a87d85/32.png) [@fenleyfen](https://discourse.gohugo.io/u/fenleyfen)\
**Post date:** [May 9, 2018, 2:49pm UTC](https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902/9 "2018-05-09T14:49:36Z")

</div>

Okay, got there. Now the only thing is: The /blog layout is a horizontal list with all the posts. However, I like the layout of the navigation (that’s actually not a nav element but a list(?)) in /research to be vertical.

---

<div class="post-metadata">

**Author:** ![fenleyfen](https://avatars.discourse-cdn.com/v4/letter/f/a87d85/32.png) [@fenleyfen](https://discourse.gohugo.io/u/fenleyfen)\
**Post date:** [May 9, 2018, 3:00pm UTC](https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902/10 "2018-05-09T15:00:51Z")

</div>

I tried following:

  
{{ range .Pages }}  
Hello  
{{ .Render “li”}}  
{{ end }}  

  

Good thing is: It returns as much "Hello"s as there are posts in /blog and correspondingly “Hello Hello Hello” in research, as there are three sub-pages. Somehow, {{ .Render “li”}} doesn’t print the link appropriately and it should now show the nav in /blog anyways.

---

<div class="post-metadata">

**Author:** ![fenleyfen](https://avatars.discourse-cdn.com/v4/letter/f/a87d85/32.png) [@fenleyfen](https://discourse.gohugo.io/u/fenleyfen)\
**Post date:** [May 9, 2018, 3:04pm UTC](https://discourse.gohugo.io/t/section-page-with-subpages-and-navigation/11902/11 "2018-05-09T15:04:16Z")

</div>

Tha solved it:

{{ range .Pages }}  
{{ .Title }}  
{{ end }}