The CSS Framework for SaaS Apps

Components
Navigation Bar

Uses JavaScript

Read the docs for this component's JavaScript.

Marketing Style #1

With Simple Dropdown Requires JS

Preview

Code

With Simple Dropdown + Footer Requires JS

Preview

Code

With Dropdown Groups Requires JS

Preview

Code

With Dropdown Groups + Footer Requires JS

Preview

Code

With Dropdown Group Grid Requires JS

Preview

Code

With Dropdown Group Grid + Footer Requires JS

Preview

Code

With Centered Items on Desktop Requires JS

Preview

Code

Supports all dropdown types. Be mindful of dropdown width when using centered positioning.

With Right-Aligned Items on Desktop Requires JS

Preview

Code

Supports all dropdown types. Be mindful of dropdown width when using centered positioning.

With Logged-In User Requires JS

Preview

Code

Marketing Style #2

With Simple Dropdown Requires JS

Preview

Code

With Simple Dropdown + Footer Requires JS

Preview

Code

With Dropdown Groups Requires JS

Preview

Code

With Dropdown Groups + Footer Requires JS

Preview

Code

With Dropdown Group Grid Requires JS

Preview

Code

With Dropdown Group Grid + Footer Requires JS

Preview

Code

With Centered Items on Desktop Requires JS

Preview

Code

Supports all dropdown types. Be mindful of dropdown width when using centered positioning.

With Right-Aligned Items on Desktop Requires JS

Preview

Code

Supports all dropdown types. Be mindful of dropdown width when using centered positioning.

With Logged-In User Requires JS

Preview

Code

App Style #1

Centered + Dropdowns Requires JS

Preview

Code

Full-Width + Dropdowns Requires JS

Preview

Code

Full-Width + Dropdowns w/ Footer Requires JS

Preview

Code

Full-Width + Dropdown Groups Requires JS

Preview

Code

Full-Width + Dropdown Groups w/ Footer Requires JS

Preview

Code

Full-Width + Dropdown Group Grid Requires JS

Preview

Code

Full-Width + Dropdown Group Grid w/ Footer Requires JS

Preview

Code

Full-Width + Right-Aligned Items on Desktop Requires JS

Preview

Code

Supports all dropdown types. Be mindful of dropdown width when using centered positioning.

Full-Width + Logged-In User Requires JS

Preview

Code

Centered + Logged-In User Requires JS

Preview

Code