✨ Add navbar_end part in navbar UI (#802)

Author: choldgraf

.changeset/witty-dryers-buy.md

@@ -0,0 +1,6 @@
+---
+"@myst-theme/site": patch
+"@myst-theme/book": patch
+---
+
+✨ Add navbar_end part in navbar UI

docs/_site/navbar_end.md

@@ -0,0 +1 @@
+{button}`MyST Docs <https://mystmd.org>`  {button}`GitHub <https://github.com/jupyter-book/myst-theme>`

docs/myst.yml

@@ -18,6 +18,7 @@ project:
       📢 **Announcement:** This is a test banner for the MyST Theme! [Learn more about MyST](/reference).
     footer: _site/footer.md
     primary_sidebar_footer: _site/primary_sidebar_footer.md
+    navbar_end: _site/navbar_end.md
   toc:
     - file: index.md
     - file: ui.md

docs/ui.md

@@ -7,6 +7,10 @@ This page documents site-level UI components that appear on every page.  use the
 Many of the UI areas below allow users to insert custom content or interface elements using **parts**.
 These are documented below, and in each case they use the same configuration pattern through `site.parts` or `project.parts` in `myst.yml`.
 
+:::{note}
+Parts are only supported in the **book** theme. The article theme does not yet support parts configuration.
+:::
+
 ## Navigation bar
 
 ### Site logo
@@ -94,6 +98,28 @@ site:
 - If the `.md` file it points to is empty, the footer will not be visible
 - If not configured, falls back to the default "Made with MyST" footer
 
+## Navbar End
+
+Display custom content at the end of the top navigation bar, after the theme toggle button.
+This is useful for adding icon links, badges, or call-to-action buttons to your navbar.
+
+### Configuration
+
+Create a markdown file with your navbar content and add it to `myst.yml`:
+
+```yaml
+site:
+  parts:
+    navbar_end: _site/navbar_end.md
+```
+
+### Behavior
+
+- Renders inline at the end of the navbar (after the theme toggle and action buttons)
+- Supports any MyST markdown content (links, images, formatting, etc.)
+- Content is rendered inline, so keep it short - a few links or icons work best
+- On narrow screens, the content moves into the primary sidebar menu
+
 ## Hiding Elements
 
 Control the visibility of various page elements. All options can be set site-wide or per-page.

packages/site/src/components/Navigation/Navigation.tsx

@@ -3,6 +3,7 @@ import { PrimarySidebar } from './PrimarySidebar.js';
 import type { Heading } from '@myst-theme/common';
 import { getProjectHeadings } from '@myst-theme/common';
 import type { SiteManifest } from 'myst-config';
+import type { GenericParent } from 'myst-common';
 
 /**
  * PrimaryNavigation will load nav links and headers from the site manifest and display
@@ -15,13 +16,15 @@ export const PrimaryNavigation = ({
   hide_toc,
   mobileOnly,
   footer,
+  navbarEnd,
 }: {
   children?: React.ReactNode;
   projectSlug?: string;
   sidebarRef?: React.RefObject<HTMLDivElement>;
   hide_toc?: boolean;
   mobileOnly?: boolean;
   footer?: React.ReactNode;
+  navbarEnd?: GenericParent;
 }) => {
   const config = useSiteManifest();
   if (!config) return null;
@@ -41,6 +44,7 @@ export const PrimaryNavigation = ({
       nav={nav}
       headings={headings}
       footer={footer}
+      navbarEnd={navbarEnd}
     />
   );
 };
@@ -63,6 +67,7 @@ export const ConfigurablePrimaryNavigation = ({
   nav,
   headings,
   footer,
+  navbarEnd,
 }: {
   children?: React.ReactNode;
   sidebarRef?: React.RefObject<HTMLDivElement>;
@@ -71,6 +76,7 @@ export const ConfigurablePrimaryNavigation = ({
   nav?: SiteManifest['nav'];
   headings?: Heading[];
   footer?: React.ReactNode;
+  navbarEnd?: GenericParent;
 }) => {
   const [open, setOpen] = useNavOpen();
   const top = useThemeTop();
@@ -107,6 +113,7 @@ export const ConfigurablePrimaryNavigation = ({
         nav={nav}
         headings={headings}
         footer={footer}
+        navbarEnd={navbarEnd}
         hide_toc={hide_toc}
         mobileOnly={mobileOnly}
       />

packages/site/src/components/Navigation/PrimarySidebar.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import { useNavigation } from '@remix-run/react';
+import type { GenericParent } from 'myst-common';
+import { MyST } from 'myst-to-react';
 import {
   useNavOpen,
   useSiteManifest,
@@ -149,6 +151,7 @@ export const PrimarySidebar = ({
   sidebarRef,
   nav,
   footer,
+  navbarEnd,
   headings,
   hide_toc,
   mobileOnly,
@@ -157,6 +160,7 @@ export const PrimarySidebar = ({
   nav?: SiteManifest['nav'];
   headings?: Heading[];
   footer?: React.ReactNode;
+  navbarEnd?: GenericParent;
   hide_toc?: boolean;
   mobileOnly?: boolean;
 }) => {
@@ -222,6 +226,16 @@ export const PrimarySidebar = ({
               <SidebarNav nav={nav} />
             </nav>
           )}
+          {navbarEnd && (
+            <div
+              className={classNames(
+                'article myst-primary-sidebar-navbar-end xl:hidden p-2 my-1 flex flex-wrap gap-2 [&_p]:contents',
+                sidebarSectionInsetClass,
+              )}
+            >
+              <MyST ast={navbarEnd} />
+            </div>
+          )}
           {nav && headings && <div className="my-3 border-b-2 lg:hidden" />}
           {headings && (
             <nav

packages/site/src/components/Navigation/TopNav.tsx

@@ -3,6 +3,8 @@ import classNames from 'classnames';
 import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon, Bars3Icon as MenuIcon } from '@heroicons/react/24/solid';
 import type { SiteManifest, SiteNavItem } from 'myst-config';
+import type { GenericParent } from 'myst-common';
+import { MyST } from 'myst-to-react';
 import { ThemeButton } from './ThemeButton.js';
 import { Search } from './Search.js';
 import {
@@ -113,7 +115,15 @@ export function NavItems({ nav }: { nav?: SiteManifest['nav'] }) {
   );
 }
 
-export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?: boolean }) {
+export function TopNav({
+  hideToc,
+  hideSearch,
+  navbarEnd,
+}: {
+  hideToc?: boolean;
+  hideSearch?: boolean;
+  navbarEnd?: GenericParent;
+}) {
   const [open, setOpen] = useNavOpen();
   const config = useSiteManifest();
   const { title, nav, actions } = config ?? {};
@@ -152,8 +162,17 @@ export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?
         <div className="flex items-center flex-grow w-auto">
           <NavItems nav={nav} />
           <div className="flex-grow block"></div>
+          {/* Search bar */}
           {!hideSearch && <Search />}
-          <ThemeButton />
+          {/* Light/Dark theme button */}
+          <ThemeButton className="w-10 h-10 ml-3" />
+          {/* Custom part at end of navbar. It is `hidden` up until xl size since it will be in the sidebar drawer up to that point */}
+          {navbarEnd && (
+            <div className="article myst-navbar-end hidden xl:flex items-center ml-3 [&>*]:m-0">
+              <MyST ast={navbarEnd} />
+            </div>
+          )}
+          {/* Mobile pop-up for page actions */}
           <div className="block sm:hidden">
             <ActionMenu actions={actions} />
           </div>

themes/book/app/routes/$.tsx

@@ -100,11 +100,12 @@ function ArticlePageAndNavigationInternal({
       <TabStateProvider>
         {projectParts?.banner && <Banner content={projectParts.banner.mdast} />}
       </TabStateProvider>
-      <TopNav hideToc={hide_toc} hideSearch={hideSearch} />
+      <TopNav hideToc={hide_toc} hideSearch={hideSearch} navbarEnd={projectParts?.navbar_end?.mdast} />
       <PrimaryNavigation
         sidebarRef={toc}
         hide_toc={hide_toc}
         footer={<SidebarFooter content={projectParts?.primary_sidebar_footer?.mdast} />}
+        navbarEnd={projectParts?.navbar_end?.mdast}
         projectSlug={projectSlug}
       />
       <TabStateProvider>

themes/book/template.yml

@@ -85,6 +85,9 @@ parts:
   - id: primary_sidebar_footer
     description: The primary sidebar footer, to replace Made with MyST
     required: false
+  - id: navbar_end
+    description: Custom content displayed at the end of the top navbar
+    required: false
 build:
   install: npm ci --ignore-scripts
   start: npm run start