Jekyll Themes •
Last updated: January 20, 2026

Tokyo Theme Navigation Setup

Tokyo Jekyll Theme

Table of Contents

Navigation is a crucial part of the Tokyo theme. This guide explains how to configure and customize the navigation menu to match your site structure.

The navigation menu is managed in _data/navigation.yml. This YAML file defines all menu items and their links.

Basic Navigation Structure

The default navigation in _data/navigation.yml looks like this:

- text: Home
  url: home
- text: About
  url: about
- text: Portfolio
  url: portfolio
- text: News
  url: news
- text: Contact
  url: contact
  • text: The display text for the menu item
  • url: The anchor link (without the # symbol)

How Navigation Works

The navigation is rendered in _includes/tk-left-part.html:


### Key Features

- **Automatic active state:** The first item gets the `active` class
- **Anchor links:** URLs are prefixed with `#` for smooth scrolling
- **Dynamic generation:** Menu items are generated from the data file

## Adding Navigation Items

### Step 1: Add to Navigation Data

Open `_data/navigation.yml` and add your item:

```yaml
- text: Home
  url: home
- text: About
  url: about
- text: Services
  url: services
- text: Portfolio
  url: portfolio
- text: News
  url: news
- text: Contact
  url: contact

Step 2: Create the Section

Create a new include file in _includes/right-parts/:

File: _includes/right-parts/tk-services.html


<div id="services" class="tokyo_tm_section">
    <div class="container">
        <div class="tokyo_tm_services">
            <h3>Our Services</h3>
            <!-- Your services content -->
        </div>
    </div>
</div>

Step 3: Include in Main Page

Add the include to index.html:

{% include right-parts/tk-home.html %}
{% include right-parts/tk-about.html %}
{% include right-parts/tk-services.html %}
{% include right-parts/tk-portfolio.html %}
{% include right-parts/tk-news.html %}
{% include right-parts/tk-contact.html %}

Step 4: Add Data (Optional)

If your section needs data, add it to _data/site_data.yml:

services:
  title: Our Services
  description: "We offer a wide range of services..."

Removing Navigation Items

To remove a navigation item:

  1. Open _data/navigation.yml
  2. Delete the item you want to remove
  3. Optionally remove the corresponding section from index.html

Example:

# Before
- text: Home
  url: home
- text: About
  url: about
- text: Services
  url: services
- text: Portfolio
  url: portfolio

# After (removed Services)
- text: Home
  url: home
- text: About
  url: about
- text: Portfolio
  url: portfolio

Reordering Navigation Items

To change the order of navigation items:

  1. Open _data/navigation.yml
  2. Rearrange the items in the desired order
  3. The first item will automatically get the active class

Example:

# Original order
- text: Home
  url: home
- text: About
  url: about
- text: Portfolio
  url: portfolio

# New order (Portfolio moved up)
- text: Home
  url: home
- text: Portfolio
  url: portfolio
- text: About
  url: about

To add external links that open in a new tab:

Method 1: Modify the Navigation Template

Edit _includes/tk-left-part.html:

<div class="menu">
    <ul>
       .....
    </ul>
</div>

Method 2: Add External Property

Update _data/navigation.yml:

- text: Home
  url: home
- text: About
  url: about
- text: Portfolio
  url: portfolio
- text: Blog
  url: https://blog.example.com
  external: true
- text: Contact
  url: contact

The Tokyo theme doesn’t include dropdown menus by default, but you can add them:

Step 1: Add Dropdown Structure to Data

Update _data/navigation.yml:

- text: Home
  url: home
- text: About
  url: about
  submenu:
    - text: About Me
      url: about-me
    - text: My Story
      url: my-story
- text: Portfolio
  url: portfolio
- text: Contact
  url: contact

Step 2: Update Navigation Template

Edit _includes/tk-left-part.html:

<div class="menu">
    <ul>
 ....
    </ul>
</div>

Step 3: Add CSS for Dropdowns

Add to assets/css/style.css:

.menu ul li {
    position: relative;
}

.menu ul .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.menu ul li:hover .submenu {
    display: block;
}

.menu ul .submenu li {
    border-bottom: 1px solid #eee;
}

.menu ul .submenu li:last-child {
    border-bottom: none;
}

.menu ul .submenu li a {
    display: block;
    padding: 10px 15px;
    color: #333;
}

.menu ul .submenu li a:hover {
    background: var(--primary-color);
    color: #fff;
}

Active State Styling

The active menu item has a special class:

.menu ul li.active a {
    color: var(--primary-color);
    font-weight: 600;
}

Hover Effects

Add hover effects to navigation items:

.menu ul li a {
    transition: color 0.3s ease;
}

.menu ul li a:hover {
    color: var(--primary-color);
}

Custom Navigation Styles

Create custom navigation styles:

.menu {
    background: var(--bg-color);
    padding: 20px;
    border-radius: 10px;
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu ul li {
    margin-bottom: 15px;
}

.menu ul li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-color);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.menu ul li a:hover,
.menu ul li.active a {
    background: var(--primary-color);
    color: #fff;
}

Mobile Navigation

The Tokyo theme includes responsive navigation for mobile devices.

Hamburger Menu

The mobile navigation typically uses a hamburger menu icon. Ensure it’s properly configured:

<button class="mobile-menu-toggle">
    <span></span>
    <span></span>
    <span></span>
</button>

Mobile Navigation CSS

@media (max-width: 768px) {
    .menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 9999;
        overflow-y: auto;
    }
    
    .menu.active {
        display: block;
    }
    
    .mobile-menu-toggle {
        display: block;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 10000;
    }
}
  1. Keep it simple: Limit to 5-7 main items
  2. Use clear labels: Make menu text descriptive
  3. Logical order: Arrange items in a logical sequence
  4. Consistent structure: Maintain consistent naming conventions
  5. Test on mobile: Ensure navigation works on all devices
  6. Accessibility: Use proper ARIA labels for screen readers
  7. External links: Mark external links clearly
  8. Active state: Ensure the current page is highlighted

Example 1: Personal Portfolio

- text: Home
  url: home
- text: About
  url: about
- text: Portfolio
  url: portfolio
- text: Blog
  url: blog
- text: Contact
  url: contact

Example 2: Business Website

- text: Home
  url: home
- text: About Us
  url: about
- text: Services
  url: services
  submenu:
    - text: Web Design
      url: web-design
    - text: Development
      url: development
    - text: Marketing
      url: marketing
- text: Portfolio
  url: portfolio
- text: Testimonials
  url: testimonials
- text: Contact
  url: contact

Example 3: Creative Agency

- text: Work
  url: portfolio
- text: Services
  url: services
- text: About
  url: about
- text: Journal
  url: blog
  external: true
- text: Contact
  url: contact

Example 4: Photographer

- text: Home
  url: home
- text: Portfolio
  url: portfolio
- text: Weddings
  url: weddings
- text: Portraits
  url: portraits
- text: About
  url: about
- text: Contact
  url: contact

Troubleshooting

Solution:

  • Check YAML syntax in _data/navigation.yml
  • Verify the navigation template is included
  • Check for typos in field names
  • Ensure the data file is in the correct location

Solution:

  • Verify section IDs match navigation URLs
  • Check that sections are included in index.html
  • Ensure anchor links have the correct format (#section-name)
  • Test links in different browsers

Active state not working

Solution:

  • The first item automatically gets the active class
  • For dynamic active states, you may need JavaScript
  • Check that the active class is properly styled

Mobile navigation not working

Solution:

  • Verify JavaScript is loading
  • Check mobile menu toggle button
  • Test on actual mobile devices
  • Ensure CSS media queries are correct

Solution:

  • Verify submenu structure in data file
  • Check CSS for dropdown display
  • Ensure hover states are properly defined
  • Test in different browsers

The Tokyo theme’s navigation system is flexible and easy to customize. Experiment with different configurations to create the perfect navigation for your site.