Skip to content

Feat: Add a droplist for ROCm Toolkit for ROCm flavors #1482

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexxu-amd merged 16 commits into from
Mar 18, 2026
Merged

Feat: Add a droplist for ROCm Toolkit for ROCm flavors #1482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
184c80b
feat: add a droplist for rocm-toolkit on header menu
alexxu-amd Mar 2, 2026
8695d3a
style: add css to make the dropdown looks nicer
alexxu-amd Mar 2, 2026
fe70df2
style: delay dropdown list disappear time; add white background for l…
alexxu-amd Mar 2, 2026
4667bec
style: change background color and add more space to entries
alexxu-amd Mar 2, 2026
48f24fd
style: reposition dropdown list
alexxu-amd Mar 2, 2026
9999688
style: resize dropdown list
alexxu-amd Mar 2, 2026
84e306a
style: adjust dropdown list position
alexxu-amd Mar 2, 2026
7f1de64
fix: reverting last change to fix a bug
alexxu-amd Mar 2, 2026
e6c8c0c
feat: shift dropdown list + add more entries
alexxu-amd Mar 2, 2026
523798d
style: reformat and reorder
alexxu-amd Mar 2, 2026
17f8dfc
feat: expand by hover over -> expand by click
alexxu-amd Mar 10, 2026
c4484c9
style: add droplist symbol
alexxu-amd Mar 10, 2026
baab5c9
style: fix symbol format
alexxu-amd Mar 10, 2026
442d31f
style: remove terrible looking droplist symbol
alexxu-amd Mar 10, 2026
b3cbdde
fix: fix linting
alexxu-amd Mar 18, 2026
a30891c
fix: remove whitespace
alexxu-amd Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/rocm_docs/rocm_docs_theme/flavors/rocm/header.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,14 @@ set nav_secondary_items = {
"Community": "https://github.com/ROCm/ROCm/discussions",
"Blogs": "https://rocm.blogs.amd.com/",
"ROCm Developer Hub": "https://www.amd.com/en/developer/resources/rocm-hub.html",
"ROCm Toolkits": {
"ROCm Data Science": "https://rocm.docs.amd.com/projects/rocm-ds/en/latest/index.html",
"ROCm Finance": "https://rocm.docs.amd.com/projects/rocm-finance/en/latest/index.html",
"ROCm Life Science": "https://rocm.docs.amd.com/projects/rocm-ls/en/latest/index.html",
"ROCm Simulation": "https://rocm.docs.amd.com/projects/rocm-simulation/en/latest/index.html",
},
"Systems and Infra Docs": "https://instinct.docs.amd.com",
"Infinity Hub": "https://www.amd.com/en/developer/resources/infinity-hub.html",
"Support": repo_url + "/issues/new/choose"
"Support": repo_url + "/issues/new/choose",
}
%}
103 changes: 57 additions & 46 deletions src/rocm_docs/rocm_docs_theme/sections/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,62 @@
{%
from "flavors/" ~ theme_flavor ~ "/header.jinja" import
nav_secondary_items, top_level_header, version_list
with context
%}
from "flavors/" ~ theme_flavor ~ "/header.jinja" import
nav_secondary_items, top_level_header, version_list
with context
%}

<header class="common-header" >
<nav class="navbar navbar-expand-xl">
<div class="container-fluid main-nav rocm-header">
<div class="header-logo">
<div class="header-logo-title">
{% if nav_secondary_items %}
<button class="navbar-toggler collapsed" id="nav-icon" data-tracking-information="mainMenuToggle" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
{% endif %}
<a class="navbar-brand" href="https://www.amd.com/">
<img src="{{ pathto('_static/images/amd-header-logo.svg',1) }}" alt="AMD Logo" title="AMD Logo" width="90" class="d-inline-block align-text-top hover-opacity"/>
</a>
<div class="vr mx-40 my-25"></div>
{{ top_level_header(
theme_repository_branch | replace("docs-", ""),
header_latest_version,
header_release_candidate_version
) }}
<header class="common-header" >
<nav class="navbar navbar-expand-xl">
<div class="container-fluid main-nav rocm-header">
<div class="header-logo">
<div class="header-logo-title">
{% if nav_secondary_items %}
<button class="navbar-toggler collapsed" id="nav-icon" data-tracking-information="mainMenuToggle" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
{% endif %}
<a class="navbar-brand" href="https://www.amd.com/">
<img src="{{ pathto('_static/images/amd-header-logo.svg',1) }}" alt="AMD Logo" title="AMD Logo" width="90" class="d-inline-block align-text-top hover-opacity"/>
</a>
<div class="vr mx-40 my-25"></div>
{{ top_level_header(
theme_repository_branch | replace("docs-", ""),
header_latest_version,
header_release_candidate_version
) }}
</div>
{{ version_list() }}
</div>
{{ version_list() }}
<div class="icon-nav text-center d-flex ms-auto"></div>
</div>
<div class="icon-nav text-center d-flex ms-auto"></div>
</div>
</nav>
{% if nav_secondary_items %}
<nav class="navbar navbar-expand-xl second-level-nav">
<div class="container-fluid main-nav">
<div class="navbar-nav-container collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-mega me-auto mb-2 mb-lg-0 col-xl-10">
{% for name, url in nav_secondary_items.items() %}
<li class="nav-item">
<a class="nav-link top-level header-menu-links" href="{{ url }}" id="nav{{ name.lower()|replace(' ','-') }}" role="button" aria-expanded="false" target="_blank" >
{{ name }}
</a>
</li>
{% endfor %}
</ul>
</nav>
{% if nav_secondary_items %}
<nav class="navbar navbar-expand-xl second-level-nav">
<div class="container-fluid main-nav">
<div class="navbar-nav-container collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-mega me-auto mb-2 mb-lg-0 col-xl-10">
{% for name, url_or_items in nav_secondary_items.items() %}
<li class="nav-item{% if url_or_items is mapping %} dropdown{% endif %}">
{% if url_or_items is string %}
<a class="nav-link top-level header-menu-links" href="{{ url_or_items }}" id="nav{{ name.lower()|replace(' ','-') }}" role="button" aria-expanded="false" target="_blank" >
{{ name }}
</a>
{% elif url_or_items is mapping %}
<a class="nav-link top-level header-menu-links dropdown-toggle header-nav-dropdown-toggle" href="#" id="nav{{ name.lower()|replace(' ','-') }}" role="button" data-bs-toggle="dropdown" aria-expanded="false" >
{{ name }}
</a>
<ul class="dropdown-menu header-nav-dropdown-menu" aria-labelledby="nav{{ name.lower()|replace(' ','-') }}">
{% for item_name, item_url in url_or_items.items() %}
<li><a class="dropdown-item" href="{{ item_url }}" target="_blank">{{ item_name }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</nav>
{% endif %}
</header>
</nav>
{% endif %}
</header>
77 changes: 77 additions & 0 deletions src/rocm_docs/rocm_docs_theme/static/rocm_header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,83 @@ header.common-header
padding: 0 1.625rem;
}
}

/* Second-level nav dropdown: click to expand, styling */
header.common-header .navbar.second-level-nav .nav-item.dropdown {
position: relative;
}
header.common-header .navbar.second-level-nav .nav-item.dropdown .header-nav-dropdown-toggle {
display: flex;
align-items: center;
padding: 1rem 1.625rem 1rem 1.75rem;
}
header.common-header .navbar.second-level-nav .header-nav-dropdown-toggle::after {
display: inline-block;
margin-left: 0.35em;
vertical-align: 0.2em;
content: "";
border: 0.35em solid transparent;
border-top-color: currentColor;
border-bottom-width: 0;
}
@media (min-width: 1200px) {
header.common-header .navbar.second-level-nav .nav-item.dropdown .header-nav-dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 14rem;
padding: 0.5rem 0;
margin: 0.25rem 0 0 0;
background-color: #27282b;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
transition: opacity 0.2s ease, transform 0.2s ease;
}
header.common-header .navbar.second-level-nav .nav-item.dropdown .header-nav-dropdown-menu.show {
display: block;
}
header.common-header .navbar.second-level-nav .header-nav-dropdown-menu .dropdown-item {
display: block;
padding: 0.5rem 1rem 0.5rem 1.75rem !important;
padding-inline-start: 1.75rem !important;
color: rgba(255, 255, 255, 0.92);
font-weight: 500;
font-size: 0.9375rem;
border: none;
background: transparent;
transition: background-color 0.15s ease, color 0.15s ease;
}
header.common-header .navbar.second-level-nav .header-nav-dropdown-menu .dropdown-item:hover,
header.common-header .navbar.second-level-nav .header-nav-dropdown-menu .dropdown-item:focus {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
}
header.common-header .navbar.second-level-nav .header-nav-dropdown-menu li {
list-style: none;
}
}
@media (max-width: 1199.98px) {
header.common-header .navbar.second-level-nav .header-nav-dropdown-menu {
background-color: #27282b;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
box-shadow: none;
}
header.common-header .navbar.second-level-nav .header-nav-dropdown-menu .dropdown-item {
padding: 0.65rem 1rem 0.65rem 1.75rem !important;
padding-inline-start: 1.75rem !important;
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
header.common-header .navbar.second-level-nav .header-nav-dropdown-toggle::after {
display: none;
}
}

header.common-header .navbar.second-level-nav .navbar-text,
header.common-header .navbar > .main-nav {
padding: 0;
Expand Down
Loading