7.2 – CSS variables

Where to set them

In the project’s quartz/styles/custom.scss:

.quartz-nav {
  --quartz-nav-indent: 1.5rem;
  --quartz-nav-color-active: var(--tertiary);
}

That wins without higher specificity: Quartz puts every component’s CSS into a CSS layer (@layer quartz-base), custom.scss not — and rules outside a layer beat rules inside one.

A single navigation

Every navigation carries its ID in the data-quartz-nav attribute:

.quartz-nav[data-quartz-nav="sidebar"] {
  --quartz-nav-bg-hover: transparent;
}

The ID is the value of id — without id, a checksum that changes with every option. So give a navigation you style specifically an id (7.3). Alternatively className adds classes of your own to the <nav>.

Colours and fonts

The defaults refer to Quartz’s theme variables and therefore follow dark mode.

Variable	Default	Effect
--quartz-nav-color	--darkgray	links
--quartz-nav-color-hover	--secondary	links on hover
--quartz-nav-color-active	--secondary	the current page
--quartz-nav-color-trail	--secondary	folders on the path to the current page
--quartz-nav-color-static	--dark	folder titles without a link
--quartz-nav-color-heading	--dark	the title heading
--quartz-nav-color-muted	--gray	chevrons, labels
--quartz-nav-color-icon	--gray	glyphs and icons
--quartz-nav-bg-hover	--highlight	background on hover
--quartz-nav-bg-active	--highlight	background of the current page
--quartz-nav-bg-panel	--light	menus, panels, mobile menu
--quartz-nav-border	--lightgray	borders and guide lines
--quartz-nav-focus	--secondary	focus ring
--quartz-nav-shadow	soft shadow, stronger in dark mode	menus and panels
--quartz-nav-backdrop	rgba(0,0,0,.35), .55 in dark mode	background behind the mobile menu
--quartz-nav-font	--bodyFont	font of the entries
--quartz-nav-heading-font	--headerFont	font of the heading
--quartz-nav-folder-font	--quartz-nav-heading-font	font of folder titles

Spacing and shape

Variable	Default	Effect
--quartz-nav-gap	0.25rem 0.5rem	gap in horizontal rows
--quartz-nav-nested-gap	0.25rem 0.5rem	gap of the sublevels in bar
--quartz-nav-indent	1rem	indentation per level
--quartz-nav-item-padding-y, -x	0.2rem, 0.5rem	padding of a row
--quartz-nav-radius	4px	corner radius of a row
--quartz-nav-line-height	1.6	line height
--quartz-nav-row-height	line height plus padding	height of the expand button
--quartz-nav-toggle-size	1.75rem	width of the expand button
--quartz-nav-icon-size	1.1em	size of the icons
--quartz-nav-accent-bar	3px	accent bar on the current page
--quartz-nav-chevron-open-rotate	180deg	rotation of the chevron on an open folder
--quartz-nav-title-size, --quartz-nav-title-margin	1rem, 0 0 0.5rem	the title heading

Menus, columns, mobile menu

Variable	Default	Effect
--quartz-nav-panel-min-width	12rem	minimum width of a menu
--quartz-nav-panel-padding	0.5rem	padding of a menu
--quartz-nav-panel-radius	6px	corner radius of a menu
--quartz-nav-panel-z	20	stacking order of menus
--quartz-nav-mega-min-width	min(40rem, 90vw)	width of the mega menu
--quartz-nav-column-min-width	10rem	minimum column width in columns and mega
--quartz-nav-column-gap	1rem 1.5rem	gap between columns
--quartz-nav-offcanvas-width	min(20rem, 85vw)	width of the mobile menu
--quartz-nav-offcanvas-padding	1rem	padding of the mobile menu
--quartz-nav-offcanvas-z	100	stacking order of the mobile menu

Type by level

Folder rows get smaller and lighter with each level: level 1 is a section, level 2 a chapter, everything below a place. Pages stay light and at most as large as --quartz-nav-page-size. The top row of the horizontal variants, by contrast, is uniform.

Variable	Default
--quartz-nav-level-1-size, -weight	0.95rem, 700
--quartz-nav-level-2-size, -weight	0.9rem, 600
--quartz-nav-level-3-size, -weight	0.875rem, 500
--quartz-nav-level-4-size, -weight	0.8rem, 500 — for level 4 and deeper
--quartz-nav-page-size, --quartz-nav-page-weight	0.875rem, 400
--quartz-nav-bar-weight	500 — top row of bar, dropdown, mega, tabs
--quartz-nav-weight-active	600 — the current page

Motion

Chevrons rotate, colours fade, folders and menus fade in when opening, the mobile menu slides in. Everything hangs on one variable:

.quartz-nav {
  --quartz-nav-transition: 0s;   /* default: 0.2s ease */
}

With prefers-reduced-motion the plugin sets it to 0s itself.