Skip to content
Theme UI Gallery
View Source
View Theme
Made by @gill_kyle


Examples of combining @theme-ui/components to create and style navigation structures.

Menu Bar

A typical menu navigation you'd see on the top of a site

Horizontal Navigation

Navigation style menus that run left to right, generally in the header or nav at the top of a page.


Horizontal list displayed from left to right.

Contained Link Group

A link group wrapped by a border.

Contained Full-rounded

Navigation links with a border and rounded edges displayed horizontally.

Vertical Navigation

Navigation style menus that run top to bottom, generally in a sidebar on a page.

Rounded Pills

Simple round pills stacked vertically.

Pills with Active Right border

Active element styled as a right border to show location in the site.

Theme Editor

Editing your theme will update all elements styled on the page by Theme UI.
Font Sizes
Font Weights
Line Heights
Color Mode
Space is used by margin, padding, and CSS grid gaps.
Edit the Theme to see changes!