> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Navigation

## Overview

The "Navigation" dashboard allows you to customize the visual styles of the navigation elements in your Knapsack workspace. This includes the Primary Navigation bar, Secondary Navigation sidebar, and Tabs used within Pattern Pages.

By adjusting colors, typography, and other visual settings, you can ensure that your workspace navigation aligns with your brand's aesthetic and provides a cohesive user experience. Whether you're tweaking the text color of the Primary Navigation or fine-tuning the typography of Tabs, these settings offer extensive control over the appearance of your workspace's navigation.

![Screenshot 2024-08-28 at 12.28.24 PM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/ca1de5c3d1013492b60d33402d41fd7b694d1300faa3dc967055acd0962d3172/docs/assets/images/f7eb14a1-screenshot-2024-08-28-at-122824-pm-o9myw6yawfpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211303Z&X-Amz-Expires=604800&X-Amz-Signature=9fe7b355a464bb4d77249427de8f2c6f56ba5bd3446ed5303c5d81a64e6d4e87&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

### Accessing Navigation Settings

To access the Navigation settings, go to the app menu in the top left corner of the screen, select Settings, and navigate to Navigation.

Here, you'll find customization options for three different navigation areas: Primary Navigation, Secondary Navigation, and Tabs.

### Primary Navigation

The Primary Navigation appears at the top of the workspace, directly below the admin bar.

#### Customization options include:

* Text Color
* Accent Color
* Hover Color
* Background Color

#### Typography settings available:

* Font Family
* Font Size
* Font Stretch
* Font Weight
* Letter Spacing
* Line Height
* Text Case

![Screenshot 2024-08-28 at 1.23.56 PM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/3f9ecc4f534e81ee7fcc1d83f588099b5f1076b90ba5b4138c90f39c4cd14995/docs/assets/images/809670f4-screenshot-2024-08-28-at-12356-pm-vixq0aurkcpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211303Z&X-Amz-Expires=604800&X-Amz-Signature=cbec30034c9e772ae551db7389e5fb790ba453b50cf7850bea1395b78fa7cd91&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

***

![Screenshot 2024-08-28 at 1.24.42 PM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/b19ed6578708a75d3d6919a8e5d96d046326082126e041ef7d406ada06bb41f6/docs/assets/images/53c41b89-screenshot-2024-08-28-at-12442-pm-u79vlprbqpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211303Z&X-Amz-Expires=604800&X-Amz-Signature=d6f3ef4a09f66c67c63d86ffae8e15b78a33bbe5e285314f9c74e7b3e144395d&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

### Secondary Navigation

The Secondary Navigation is contained in the left sidebar.

#### Customization options include:

* Text Color
* Accent Color
* Background Color

#### Typography settings available:

* Font Family
* Font Size
* Font Stretch
* Font Weight
* Letter Spacing
* Line Height
* Text Case

***

### Tabs

Tabs are located within Pattern Pages and correlate to either a design source, a sub-page (documentation), or a template (coded component).

#### Customization options include:

* Text Color
* Accent Color

#### Typography settings available:

* Font Family
* Font Size
* Font Stretch
* Font Weight
* Letter Spacing
* Line Height
* Text Case

![Screenshot 2024-08-28 at 1.25.21 PM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/dde04da677eea46ed0186d72949d46603ef4be6059f09a0cfa6cb181aa478ddb/docs/assets/images/92d81168-screenshot-2024-08-28-at-12521-pm-yngfyckle3png.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211303Z&X-Amz-Expires=604800&X-Amz-Signature=861372c5b1240b30e98f31d76bc28145d94749d17e9def7c4d422db8a2cce4ea&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)