openstax · TomWoodward · Jun 24, 2026 · Jun 24, 2026 · Jun 24, 2026 · Jun 24, 2026
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.22.2",
+  "version": "1.22.4",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"

diff --git a/src/components/DropdownMenu.css b/src/components/DropdownMenu.css
@@ -0,0 +1,88 @@
+/* Dropdown menu trigger button */
+.dropdown-menu-button {
+  align-items: center;
+  border: 0;
+  border-radius: 0.5rem;
+  box-shadow: 0px 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
+  display: inline-flex;
+  flex-direction: row;
+  font-size: 1.6rem;
+  position: relative;
+  justify-content: space-between;
+  line-height: 2rem;
+  min-height: 2.5rem;
+  padding: 1rem 2.5rem 1rem 1rem;
+  text-align: left;
+  text-decoration: none;
+  transition: all 0.2s ease-in-out;
+  user-select: none;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  /* Variant-specific styles using CSS custom properties (shared with Button.css) */
+  background-color: var(--button-bg, #d4450c);
+  color: var(--button-color, #ffffff);
+  font-weight: var(--button-font-weight, 700);
+}
+
+.dropdown-menu-button:disabled {
+  opacity: 0.4;
+}
+
+.dropdown-menu-button:not([disabled]) {
+  cursor: pointer;
+}
+
+.dropdown-menu-button:not([disabled]):hover {
+  background: var(--button-bg-hover, #be3c08);
+}
+
+.dropdown-menu-button:not([disabled]):active {
+  background: var(--button-bg-active, #b03808);
+}
+
+.dropdown-menu-button:focus {
+  outline: solid var(--button-outline, #ffffff);
+  box-shadow: inset 0 0 0 0.3rem var(--button-shadow, #000000);
+}
+
+.dropdown-menu-button::after {
+  background: var(--dropdown-caret-color, #ffffff);
+  clip-path: polygon(0 0, 100% 100%, 100% 0);
+  content: " ";
+  display: block;
+  position: absolute;
+  height: 0.6rem;
+  margin-top: -0.25rem;
+  right: 1rem;
+  transform: rotate(135deg);
+  width: 0.6rem;
+}
+
+/* Dropdown menu popover */
+.dropdown-menu {
+  margin-top: -0.6rem;
+  background-color: #ffffff;
+  border: 0.1rem solid #d5d5d5;
+  padding: 0;
+  cursor: pointer;
+  color: #000000;
+}
+
+.dropdown-menu [role="menuitem"] {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  font-size: 1.6rem;
+  min-height: 2.5rem;
+  line-height: 2rem;
+  padding: 1rem 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.dropdown-menu [role="menuitem"]:hover {
+  background-color: #f1f1f1;
+}
diff --git a/src/components/DropdownMenu.stories.tsx b/src/components/DropdownMenu.stories.tsx
@@ -34,6 +34,36 @@ const Menus = (variant: 'light' | 'primary' | 'secondary') => {
         Export grades to .csv
       </DropdownMenuItem>
     </DropdownMenu>
+
+    <br/>
+
+    <DropdownMenu id='links-menu' text='Resources' variant={variant}>
+      <DropdownMenuItem href='https://openstax.org' target='_blank'>
+        Browse subjects
+      </DropdownMenuItem>
+      <DropdownMenuItem href='https://openstax.org/subjects' target='_blank'>
+        View all textbooks
+      </DropdownMenuItem>
+      <DropdownMenuItem href='https://openstax.org/about' target='_blank'>
+        About OpenStax
+      </DropdownMenuItem>
+    </DropdownMenu>
+
+    <br/>
+
+    <div style={{ width: '50rem', maxWidth: '100%' }}>
+      <DropdownMenu id='links-menu' text='Wide Menu' width="100%" variant={variant}>
+        <DropdownMenuItem href='https://openstax.org' target='_blank'>
+          Browse subjects
+        </DropdownMenuItem>
+        <DropdownMenuItem href='https://openstax.org/subjects' target='_blank'>
+          View all textbooks
+        </DropdownMenuItem>
+        <DropdownMenuItem href='https://openstax.org/about' target='_blank'>
+          About OpenStax
+        </DropdownMenuItem>
+      </DropdownMenu>
+    </div>
   </>;
 };
 

diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
@@ -1,76 +1,8 @@
+import React from 'react';
 import { Button, Menu, MenuItem, MenuProps, MenuTrigger, MenuTriggerProps, Popover } from 'react-aria-components';
-import styled from 'styled-components';
-import { ButtonVariant, applyButtonVariantStyles } from '../theme/buttons';
+import { ButtonVariant, getButtonVariantStyles } from '../theme/buttons';
 import { palette } from '../theme/palette';
-
-const StyledButton = styled(Button)<{ variant: ButtonVariant; width?: string }>`
-  ${(props) => applyButtonVariantStyles(props.variant)}
-
-  align-items: center;
-  border: 0;
-  border-radius: 0.5rem;
-  box-shadow: 0px 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
-  display: inline-flex;
-  flex-direction: row;
-  font-size: 1.6rem;
-  position: relative;
-  justify-content: center;
-  line-height: 2rem;
-  min-height: 2.5rem;
-  padding: 0 1.5rem 0 0.5rem;
-  text-align: left;
-  text-decoration: none;
-  transition: all 0.2s ease-in-out;
-  user-select: none;
-  ${(props) => props.width ? `width: ${props.width}` : null}
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-
-  &:disabled {
-    opacity: 0.4;
-  }
-
-  &:not([disabled]) {
-    cursor: pointer;
-  }
-
-  :after {
-    background: ${(props) => props.variant === 'light' ? palette.black : palette.white};
-    clip-path: polygon(0 0, 100% 100%, 100% 0);
-    content: ' ';
-    display: block;
-    position: absolute;
-    height: 0.5rem;
-    margin-top: -0.25rem;
-    right: 0.5rem;
-    transform: rotate(135deg);
-    width: 0.5rem;
-  }
-`;
-
-const StyledMenu = styled(Menu)`
-  margin-top: -0.6rem;
-  background-color: ${palette.white};
-  border: 0.1rem solid ${palette.pale};
-  padding: 0.3rem 0;
-  cursor: pointer;
-  color: ${palette.black};
-
-  [role="menuitem"] {
-    font-size: 1.6rem;
-    min-height: 2.5rem;
-    line-height: 2rem;
-    padding: 0 0.5rem;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-
-    &:hover {
-      background-color: ${palette.pale};
-    }
-  }
-`;
+import './DropdownMenu.css';
 
 interface DropdownMenuButtonProps<T> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {
   text?: string;
@@ -82,13 +14,26 @@ interface DropdownMenuButtonProps<T> extends MenuProps<T>, Omit<MenuTriggerProps
 export const DropdownMenu = <T extends object>(
   { text, children, variant, width, disabled, ...props }: DropdownMenuButtonProps<T>
 ) => {
+  const variantStyles = getButtonVariantStyles(variant);
+  const buttonStyle = {
+    '--button-bg': variantStyles.background,
+    '--button-bg-hover': variantStyles.backgroundHover,
+    '--button-bg-active': variantStyles.backgroundActive,
+    '--button-color': variantStyles.color,
+    '--button-outline': variantStyles.outline,
+    '--button-shadow': variantStyles.shadow,
+    '--button-font-weight': variantStyles.fontWeight ?? 700,
+    '--dropdown-caret-color': variant === 'light' ? palette.black : palette.white,
+    ...(width ? { width } : {}),
+  } as React.CSSProperties;
+
   return (
     <MenuTrigger {...props}>
-      <StyledButton variant={variant} width={width} isDisabled={disabled}>{text}</StyledButton>
+      <Button className="dropdown-menu-button" style={buttonStyle} isDisabled={disabled}>{text}</Button>
       <Popover>
-        <StyledMenu {...props}>
+        <Menu {...props} className="dropdown-menu">
           {children}
-        </StyledMenu>
+        </Menu>
       </Popover>
     </MenuTrigger>
   );

diff --git a/src/components/__snapshots__/DropdownMenu.spec.tsx.snap b/src/components/__snapshots__/DropdownMenu.spec.tsx.snap
@@ -5,10 +5,11 @@ exports[`DropdownMenu matches snapshots 1`] = `
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    class="sc-bczRLJ hTVCmA"
+    class="dropdown-menu-button"
     data-rac=""
     data-react-aria-pressable="true"
     id="react-aria-1"
+    style="--button-bg: #D4450C; --button-bg-hover: #be3c08; --button-bg-active: #b03808; --button-color: #ffffff; --button-outline: #ffffff; --button-shadow: #000000; --button-font-weight: 700; --dropdown-caret-color: #ffffff;"
     tabindex="0"
     type="button"
   >
@@ -22,10 +23,11 @@ exports[`DropdownMenu matches snapshots 2`] = `
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    class="sc-bczRLJ ga-doNl"
+    class="dropdown-menu-button"
     data-rac=""
     data-react-aria-pressable="true"
     id="react-aria-4"
+    style="--button-bg: #ffffff; --button-bg-hover: #ffffff; --button-bg-active: #e5e5e5; --button-color: #424242; --button-outline: #ffffff; --button-shadow: #000000; --button-font-weight: 400; --dropdown-caret-color: #000000; width: 20rem;"
     tabindex="0"
     type="button"
   >