Sidebars — macOS 27

Read when: you need an exact macOS 27 value for sidebars (size, colour, text, effect) as Apple's kit draws it. Owns: Sidebars in Apple's macOS 27 kit: components, anatomy, sizes, colours and states, text, effects, kit notes.

Source: specs/sidebars.txt from Apple's macOS 27 UI Kit (Sketch, v27.0.3), read 2026-11-01. Values are copied from the kit; derived values say so. How the sidebar sits inside a window (pane size, background material, titlebar) is not on this page; it comes from the window components in specs/windows.txt and the Sidebar/Background/* styles in surface-styles.md, and each such value names that source.

The 􀻃 (U+100EC3) folder in component names is the kit's folder for building-block parts.

Components

220 components, 110 per appearance. No documentation boards.

L1 parts are used by Level 0 rows and Item rows; L1+ parts by Folder rows at Levels 1–4 (see Anatomy).

Anatomy

The sidebar in a window (from specs/windows.txt)

The macOS 27 kit draws the sidebar edge to edge, not as a floating inset panel.

Sidebar background (rect "BG" 256×400 @0,0, the bottom layer of the Left Pane). Values from surface-styles.md:

How it sits under the titlebar and toolbar: the BG rect starts at y 0, so the sidebar material runs up behind the titlebar. The Left Pane carries its own titlebar group, drawn on top of the list, with the window controls and the sidebar toggle; the list starts below it. The Right Pane has a Scroll Edge Effect/{Dark,Light} - Top - Hard under its toolbar; the Left Pane has none.

The toggle text override in these windows is 􀰱 (U+100C31). Derived: the toggle's trailing inset is 8 in every window (256 − 212 − 36 = 8; 256 − 224 − 24 = 8).

Layer order in the Left Pane is BG, then the list, then the titlebar group (bottom to top), in every window except Windows/Light/Default + Title + Sidebar/Active, which stores the list below BG. The Light Inactive windows use the Examples/Active/Small list over the Inactive background; the Dark Inactive windows use Examples/Inactive/Small.

Window style with a sidebar (surface-styles.md): Windows/Dark/With Sidebar/* fill #000000 (blend screen), Windows/Light/With Sidebar/* fill #FFFFFF (blend multiply); Active shadows x0 y36 blur100 #000000@40% + x0 y0 blur1 #000000@80%; Inactive shadows x0 y16 blur32 #000000@20% + x0 y0 blur1 #000000@80%; corners 16.

In the 600×300 Window BG (with Sidebar) components that have panes (Active and Inactive, in each appearance), the Sidebar/Background style sits on the Left Pane itself, with stack v gap0 pad8,8,8,8. The other two components with that name in each appearance use the No Sidebar window style and have no panes.

Sidebar list (Examples)

Section order, top to bottom, with each section's y in the list:

Which row is selected: in Dark examples, "Basic Row w/ Count"; in Light examples, the first "Basic Row".

Row (Folders and Items)

Each row master is 240 wide (instanced at 228 in the examples), fill #FFFFFF on the master, stack h pad0,2,0,L where L is the indent below.

Indent (the row's left padding = Leading x):

Positions inside Leading, by size (checked across all appearances and states):

Derived title x inside the 240 row (Leading x + Title x):

Derived: Levels 0–3 step 12 points each; Level 4 drops the disclosure and sets its symbol at x 64.

Trailing: Large 41×40 @197, Medium 36×32 @202, Small 32×24 @206. Derived: each ends at x 238, 2 from the row's right edge (the row's right padding).

Row parts (􀻃)

Glyphs: Disclosure Open 􀆈 (U+100188), Closed 􀆊 (U+10018A); Folder 􀈕 (U+100215); Symbol 􀈷 (U+100237). All image corners use smoothing 0.6.

Section header

Header parts: Submenu/{Open,Closed} Large 20×16 (text 20×16), Medium and Small 20×14 (text 20×14); Details Large 36×16, Medium and Small 32×14, all stack h gap0 pad0. Derived: the header title starts at the Section's x 0, which is x 14 in the 256 sidebar, the same leading edge as the rows.

The examples override every open header with swap→Sidebars/{A}/􀻃/Small/Headers - Trailing/Submenu/Open, including Large and Medium headers.

Window Controls + Disclosure

Derived: the toggle ends 8 from the component's right edge in both (168 + 24 = 192; 152 + 40 = 192; 200 − 192 = 8).

Sizes

Rows

Derived: the selection highlight overhangs the row master by 4 on each side (−4 left; 248 − 240 − 4 = 4 right). In the 256 sidebar, where rows sit at x 14 and are 228 wide, the highlight would run from x 10 to x 246, 10 from each sidebar edge and 236 wide, if the Background keeps that 4-point overhang when the row is resized. The kit stores only the 240-wide master.

Sections and headers

Sidebar list

Colours and states

Rows — Dark (all text layers use blend plus-lighter)

Rows — Light (all text layers use blend plus-darker)

Checked across all 108 row components: the title colour is the same in every state of an appearance, and the Selected rows use the same symbol parts as Default. Selection is a neutral fill, not the accent colour. Derived: the selection's effective alpha is 5.5% (11% fill × 50% layer opacity).

Window state (Active and Inactive examples)

In windows the material changes with window state (see the Sidebar/Background table under Anatomy).

Section header

Text

No sidebar text layer has tracking (no kern on this page). Fonts are PostScript names.

The shared styles define 04 Title3/Default as SFPro-Regular 15/20, 06 Body/Default as SFPro-Regular 13/16 and 08 Subheadline/Default as SFPro-Regular 11/14 (text-styles.md). Folder rows at every size, and Item rows at Small, set the weight to Medium over those styles.

Effects

Kit notes

• The page has no documentation boards. Its only free text is the page labels "Sidebar" with "Dark" or "Light" (SFPro-Bold 60).
• The example lists act as Apple's usage guide: open and closed sections, a closed section showing a count in the header detail, parents with open and closed disclosures, children up to Level 4, a row with a count ("64"), and rows with images instead of symbols.
• Open sections use the open header chevron (􀆈) and closed sections keep the closed one (􀆊). Closed parents swap in Disclosure/Closed.
• Counts sit in the row's trailing Detail text.
• The kit's change log (specs/change-log.txt) lists "Updated appearance of windown controls" under 27.0.2; the sidebar's Window Controls + Disclosure components use those controls.

Finding it in the spec