Skip to main content
Ctrl+K
The Bokeh logo
  • First steps
  • User guide
  • Gallery
  • Reference
  • Contribute
  • Releases
  • Tutorial
  • Community
  • GitHub
  • First steps
  • User guide
  • Gallery
  • Reference
  • Contribute
  • Releases
  • Tutorial
  • Community
  • GitHub
  • div_fragment_links

div_fragment_links#

from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import Div

sections = [
    ("setup", "Setup"),
    ("data", "Loading the data"),
    ("analysis", "Analysis"),
    ("results", "Results"),
]

entries = "".join(f'<li><a href="#{name}">{title}</a></li>' for name, title in sections)
contents = Div(text=f'<h2 id="contents">Contents</h2><ul>{entries}</ul>')

filler = " ".join([
    "Each section is long enough that the page has to scroll to reach it.",
    "Links that start with # jump to the element with that id, or to an",
    "&lt;a&gt; element with that name, in the same Div or in another one.",
] * 8)

body = ""
for name, title in sections:
    body += f'<h2 id="{name}">{title}</h2>'
    body += f"<p>{filler}</p>" * 3
    if name == "setup":
        body += '<p>The figures are discussed under <a href="#results">Results</a>.</p>'
    body += '<p><a href="#contents">Back to contents</a></p>'

text = Div(text=body, width=600)

show(column(contents, text))
Project
  • Roadmap
  • Team
  • Branding
Documentation
  • User Guide
  • Gallery
  • Reference Guide
Hands On
  • Tutorials
  • Demos
  • Support
Contribute
  • GitHub
  • Contributor Guide
  • Sponsor

Bokeh is a fiscally sponsored project of NumFOCUS, a nonprofit dedicated to supporting the open-source scientific computing community. Donations help pay for cloud hosting costs, travel, and other project needs.

©2026 Bokeh Contributors. The website content uses the BSD License and is covered by the Bokeh Code of Conduct.

Donate