Shrinivas Kudva Tech Blog

Menu Configuration

Contents â–¾

The Sans theme features a customizable main navigation menu that provides site-wide navigation. This guide covers all aspects of menu configuration and customization.

The theme implements a single main navigation menu that appears consistently across all pages. Menu configuration is managed through the config/menus.toml file, providing centralized control over navigation structure.

Basic Configuration

Configuration File Location

Menu settings are stored in:

your-hugo-site/config/menus.toml

Menu Entry Structure

Each menu item follows this basic structure:

TOML 
1
2
3
4

[[main]]
  name = 'Display Name'
  pageRef = '/path'
  weight = 10

Core Parameters

ParameterTypeRequiredDescription
namestringYesDisplay text shown in navigation
pageRefstringNo*Internal page reference (Hugo pages)
urlstringNo*Direct URL (files, external links)
weightintegerYesDisplay order (lower values appear first)
paramsobjectNoAdditional parameters (e.g., target attribute)
Table: Menu Entry Parameters

Note: Either pageRef or url must be specified, but not both.

Link to the site’s root page:

TOML 
1
2
3
4

[[main]]
  name = 'Home'
  pageRef = '/'
  weight = 10

2. Taxonomy Pages

Link to automatically generated taxonomy list pages:

TOML 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# Posts list page
[[main]]
  name = 'Posts'
  pageRef = '/posts'
  weight = 20

# Tags taxonomy
[[main]]
  name = 'Tags'
  pageRef = '/tags'
  weight = 30

# Categories taxonomy
[[main]]
  name = 'Categories'
  pageRef = '/categories'
  weight = 40

3. Individual Pages

Link to specific content pages:

TOML 
1
2
3
4
5
6
7
8
9

[[main]]
  name = 'About'
  pageRef = '/pages/about/'
  weight = 50

[[main]]
  name = 'Contact'
  pageRef = '/pages/contact/'
  weight = 55

Path Structure: The pageRef should match your content directory structure:

Link directly to files (PDFs, images, downloads):

TOML 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

[[main]]
  name = 'Resume'
  url = '/files/resume.pdf'
  weight = 60
  params = {target = "_blank"}

[[main]]
  name = 'Portfolio'
  url = '/images/portfolio.jpg'
  weight = 65
  params = {target = "_blank"}

File Location: Place files in the static directory:

Link to external websites or resources:

TOML 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

[[main]]
  name = 'Documentation'
  url = 'https://docs.example.com'
  weight = 70
  params = {target = "_blank"}

[[main]]
  name = 'GitHub'
  url = 'https://github.com/username/repo'
  weight = 75
  params = {target = "_blank", rel = "noopener noreferrer"}

Link to content sections or subdirectories:

TOML 
1
2
3
4
5
6
7
8
9

[[main]]
  name = 'Documentation'
  pageRef = '/docs/'
  weight = 80

[[main]]
  name = 'Tutorials'
  pageRef = '/tutorials/'
  weight = 85

Weight-Based Ordering

Understanding Weight

The weight parameter determines menu item display order using ascending numeric values.

Weight ValuePositionBest Practice
Lower numbersAppear first (left)Homepage, main sections
10, 20, 30...Standard incrementAllows easy insertion of new items
Higher numbersAppear last (right)Secondary links, external resources
Table: Weight Ordering System

Weight Examples

TOML 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

[[main]]
  name = 'Home'
  pageRef = '/'
  weight = 10        # First position

[[main]]
  name = 'Blog'
  pageRef = '/posts'
  weight = 20        # Second position

[[main]]
  name = 'About'
  pageRef = '/about'
  weight = 30        # Third position

[[main]]
  name = 'Contact'
  pageRef = '/contact'
  weight = 40        # Fourth position

Result: Menu renders as: Home | Blog | About | Contact Using increments of 10 allows easy insertion:

Advanced Parameters

Use the params object to add HTML attributes:

TOML 
1
2
3
4
5

[[main]]
  name = 'External Site'
  url = 'https://example.com'
  weight = 50
  params = {target = "_blank"}

For external links, add security attributes:

TOML 
1
2
3
4
5

[[main]]
  name = 'Partner Site'
  url = 'https://partner.com'
  weight = 60
  params = {target = "_blank", rel = "noopener noreferrer"}

Custom CSS Classes

Add custom styling classes to menu items:

TOML 
1
2
3
4
5

[[main]]
  name = 'Premium'
  pageRef = '/premium'
  weight = 70
  params = {class = "premium-link"}

Complete Configuration Example

Full Menu Configuration

TOML 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# config/menus.toml

# Homepage
[[main]]
  name = 'Home'
  pageRef = '/'
  weight = 10

# Content sections
[[main]]
  name = 'Blog'
  pageRef = '/posts'
  weight = 20

[[main]]
  name = 'Projects'
  pageRef = '/projects'
  weight = 30

# Taxonomy pages
[[main]]
  name = 'Tags'
  pageRef = '/tags'
  weight = 40

[[main]]
  name = 'Categories'
  pageRef = '/categories'
  weight = 50

# Static pages
[[main]]
  name = 'About'
  pageRef = '/pages/about/'
  weight = 60

[[main]]
  name = 'Contact'
  pageRef = '/pages/contact/'
  weight = 70

# External resources
[[main]]
  name = 'Documentation'
  url = '/docs/'
  weight = 80

[[main]]
  name = 'GitHub'
  url = 'https://github.com/username/repo'
  weight = 90
  params = {target = "_blank", rel = "noopener noreferrer"}

# Downloadable files

[[main]]
  name = 'Resume'
  url = '/files/resume.pdf'
  weight = 100
  params = {target = "_blank"}

Responsive Behavior

Mobile Menu

The theme automatically adapts the menu for mobile devices: