Shibuya Shibuya Shibuya
  • Examples
    • Admonitions Bring the attention of readers
    • Code Blocks Display code with highlights
    • Autodoc API documentation automatically
    • Jupyter Notebook Rendering .ipynb files
  • Branding
  • Sponsor me
  • Discussion

Getting started

  • Installation
  • Configuration
    • Logos
    • CSS Variables
    • Colors
    • Navbar links
    • Layouts
    • Announcement
    • Social network
    • Fonts
    • Sidebar
    • Languages
    • Advertisement
    • Icons
    • Markdown
  • Writing Guide
    • Markups
    • Block quotes
    • Lists
    • Tables
    • Admonitions
    • Code blocks
    • Math
    • Images and videos
    • API reference
    • Meta tags

Extensions

  • sphinx-copybutton
  • sphinx-design
  • sphinx-tabs
  • sphinx-togglebutton
  • jupyter-sphinx
  • nbsphinx
  • numpydoc
  • sphinxcontrib-mermaid
  • sphinx-docsearch
  • sphinx-click
  • sphinx-sqlalchemy
  • sphinx-contributors

Development

  • Contributing
    • Translations
    • Roadmap
  • Alternatives
  • Stability Policy
  • Changelog

On this page

  • Nested links
  • Link summary
  • External link
  • Resource link
  • Align nav links
lepture/shibuya 0 0
Edit this page
  1. Shibuya /
  2. Configuration /
  3. Navbar links

Navbar links¶

Elevate navigation with custom navbar links.


The nav_links option allows you to add custom links to the navbar of your documentation with Shibuya theme. Each link consists of a title and a URL. Here is an example configuration code:

conf.py¶
html_theme_options = {
    "nav_links": [
        {
            "title": "Sponsor me",
            "url": "https://github.com/sponsors/lepture"
        },
    ]
}

You can add more links to the nav_links list by including additional dictionaries. However, we recommend that you keep the number of links to a minimum to avoid cluttering your navbar.

Nested links¶

The nav_links can also contain children links:

conf.py¶
html_theme_options = {
    "nav_links": [
        {
            "title": "Examples",
            "url": "writing",
            "children": [
                {
                    "title": "Admonitions",
                    "url": "writing/admonition",
                },
                {
                    "title": "Code Blocks",
                    "url": "writing/code",
                },
                {
                    "title": "Autodoc",
                    "url": "writing/api",
                },
            ]
        },
    ]
}

Link summary¶

The children links has an extra (optional) summary field, which is a short description of the link:

conf.py¶
html_theme_options = {
    "nav_links": [
        {
            "title": "Examples",
            "url": "writing",
            "children": [
                {
                    "title": "Admonitions",
                    "url": "writing/admonition",
                    "summary": "Bring the attention of readers",
                },
            ]
        },
    ]
}

External link¶

You can add an extra external field to display an external link icon:

conf.py¶
html_theme_options = {
    "nav_links": [
        {
            "title": "Sponsor me",
            "url": "https://github.com/sponsors/lepture",
            "external": True,
        },
    ]
}

Resource link¶

You can add an extra resource field to prevent sphinx’s built-in HTML builder to append html suffix:

conf.py¶
html_theme_options = {
    "nav_links": [
        {
            "title": "Download",
            "url": "_static/readme.pdf",
            "resource": True,
        },
    ]
}

Align nav links¶

The nav_links are aligned left by default, you can change the align to center or right with:

conf.py¶
# align center
html_theme_options = {
    "nav_links_align": "center",
}

# align right
html_theme_options = {
    "nav_links_align": "right",
}
Previous
Colors
Next
Layouts

Copyright © 2023, Hsiaoming Yang

Made with Sphinx and Shibuya theme.