Examples on Hugo Solstice Theme

Basic jumbotron

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

A jumbotron renders automatically as soon as headline is set in the page front matter. Adding a tagline provides a short supporting line beneath it.

headline: "Hugo Solstice Theme"
tagline: "The open-source platform for Eclipse Foundation sites."

Custom menu with direct links

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

When a top-level menu entry has no children, it renders as a plain <a> link in the navigation bar. This is the right pattern for short menus where each destination is a single page.

The navigation above is driven by the demo_direct menu defined in menus.en.toml and activated on this page with:

main_menu: "demo_direct"

[[demo_direct]]
 name = "Home"
 url = "/"
 weight = 1

[[demo_direct]]
 name = "Examples"
 url = "/examples/"
 weight = 2

[[demo_direct]]
 name = "Changelog"
 url = "/changelog/"
 weight = 3

Raw HTML in Markdown

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

Hugo’s Goldmark renderer escapes or strips some raw HTML by default. The html shortcode passes its inner content through safeHTML, letting you embed any HTML you need without changing site-wide Markdown settings.

Example

Note: This alert block is raw HTML, rendered inside a Markdown page through the html shortcode.

Source

{{< html >}}
<div class="alert alert-info">
 <strong>Note:</strong> This alert block is raw HTML, rendered inside a
 Markdown page through the <code>html</code> shortcode.
</div>
{{< /html >}}

When to use it

Reach for html when the markup you want isn’t expressible in Markdown: a wrapper with custom classes, a semantic element like <aside>, or a specific Bootstrap component. For repeated patterns, prefer a dedicated shortcode or partial.

Custom menu with dropdowns

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

When a top-level menu entry has children but none of those children have children themselves, the theme renders it as a dropdown toggle button in the navigation bar.

The navigation above is driven by the demo_dropdown menu defined in menus.en.toml and activated on this page with:

main_menu: "demo_dropdown"

[[demo_dropdown]]
 name = "Home"
 url = "/"
 weight = 1

[[demo_dropdown]]
 identifier = "demo-dropdown-docs"
 name = "Docs"
 url = "#"
 weight = 2

[[demo_dropdown]]
 parent = "demo-dropdown-docs"
 name = "Components"
 url = "/components/"
 weight = 1

[[demo_dropdown]]
 parent = "demo-dropdown-docs"
 name = "Front Matter"
 url = "/frontmatter/"
 weight = 2

[[demo_dropdown]]
 parent = "demo-dropdown-docs"
 name = "Configuration"
 url = "/configuration/"
 weight = 3

Jumbotron with preheadline

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

preheadline renders above the main headline in a smaller style. It is typically used to label the type of page (announcement, event, section name, etc.).

preheadline: "Announcement"
headline: "Solstice 3.1 is now available"
tagline: "New components, refreshed documentation, and ESM support."

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

The table_of_contents shortcode renders a heading followed by Hugo’s automatically generated TOC for the current page. Hugo collects every heading from the page body and produces a nested list of anchor links. Use it on long-form documents — guides, specifications, runbooks — where readers need a quick way to jump between sections.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet tortor id rhoncus pulvinar. Suspendisse nec aliquam ante. Sed vel convallis ex, ac elementum nisi. Nam eros lectus, tempus sit amet lorem at, laoreet blandit enim. Vestibulum metus justo, venenatis mollis ex quis, pretium ultricies orci.

Custom menu with a mega menu

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

When a top-level menu entry has children that themselves have children, the theme automatically promotes it to a mega menu: clicking the entry opens a full-width panel where each second-level child becomes a column heading and its third-level children become the links underneath.

Each column heading accepts an optional Font Awesome icon via the pre property, which is rendered before the heading text.

The navigation above is driven by the demo_mega menu defined in menus.en.toml and activated on this page with:

Jumbotron with call-to-action links

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

Each entry in links becomes a button in the jumbotron. Use class to switch between primary, default, or any other button style supplied by the theme.

links: [
 [href: "/downloads/", text: "Download", class: "btn btn-primary"],
 [href: "/changelog/", text: "Release notes", class: "btn btn-default"],
]

Custom sidebar

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

The sidebar partial reads from the sidebar menu in the site configuration. By default, it picks the section that matches the current page’s path. You can override this for a single page by setting sidebar in the front matter to one or more identifiers from menus.toml.

Top-level entries become collapsible group headings. Their children are rendered as plain links, unless those children also have children, in which case the second level becomes a nested collapsible subgroup.

Jumbotron with custom content

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

custom_jumbotron accepts raw HTML, which is rendered inside the jumbotron between the headline and the optional links row. It is best used as an alternative to tagline when richer formatting is required.

headline: "Solstice Summit 2026"
custom_jumbotron: |
 <p class="margin-top-20"><strong>May 19, 2026</strong> &mdash; 8AM–11AM PST</p>
 <p>Virtual event · Free registration</p>

Jumbotron with constrained width

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

jumbotron_class is applied to the inner column that wraps the headline, tagline, and links. Use Bootstrap-style grid classes to constrain the content to a portion of the container.

jumbotron_class: "col-md-16 col-lg-14"

Page without a breadcrumb

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

Setting hide_breadcrumb: true removes the <nav aria-label="Breadcrumb"> block from the page. The page above has no breadcrumb between the jumbotron and the main content.

The same parameter is available at the site level (in config.toml) if you want to suppress breadcrumbs globally.

hide_breadcrumb: true

Custom breadcrumb label

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

By default the breadcrumb uses each page’s title. Set breadcrumb_title to display a different label for the current page only — typically a shorter or friendlier version. Values longer than 32 characters are truncated.

Look at the breadcrumb above: this page’s title is “Custom breadcrumb label” but the breadcrumb shows Friendly name.

breadcrumb_title: "Friendly name"

Jumbotron with custom background

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

jumbotron_background_class controls the CSS class applied to the <section> wrapping the jumbotron. The theme ships with multiple bg-hero-* variants; you can also point to a project-specific class for a fully custom look. This page combines the theme’s bg scaffold with a project-specific bg-example class defined in docs.css to render a black-to-orange gradient.

jumbotron_background_class: "bg bg-example"

Fully configured jumbotron

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

This page combines preheadline, headline, tagline, links, jumbotron_class, and jumbotron_background_class to demonstrate how all the jumbotron parameters interact.

preheadline: "Now available"
headline: 'Hugo Solstice Theme <span class="orange">3.0.0</span>'
tagline: "The official Hugo theme powering Eclipse Foundation sites."
links: [
 [href: "/downloads/", text: "Download", class: "btn btn-primary"],
 [href: "/changelog/", text: "Release notes", class: "btn btn-default"],
]
jumbotron_background_class: "bg bg-hero-1"
jumbotron_class: "col-md-20 col-lg-18"

Examples on Hugo Solstice Theme

Basic jumbotron

Custom menu with direct links

Raw HTML in Markdown

Example

Source

When to use it

Custom menu with dropdowns

Jumbotron with preheadline

Table of contents

Custom menu with a mega menu

Jumbotron with call-to-action links

Custom sidebar

Jumbotron with custom content

Jumbotron with constrained width

Page without a breadcrumb

Custom breadcrumb label

Jumbotron with custom background

Fully configured jumbotron