Ready

App Header

The App Header contains actions that can be accessed from any page across Basis platform.

Ready

App Header

The App Header contains actions that can be accessed from any page across Basis platform.

Ready

App Header

The App Header contains actions that can be accessed from any page across Basis platform.

Anatomy

Anatomy

Anatomy

  1. Menu

  2. Logo

  3. Universal Search

  4. App Nav

States

States

States

The app header Universal Search uses the Dynamic Search component to allow use to search across campaigns, groups and tactics.

  1. Default

  2. Active

Behaviors

Behaviors

Behaviors

Breakpoint Behavior

  1. X-large: Right side navigation items display visible labels.

  2. Large: Right side navigation items labels become hidden

  3. Medium: Search input becomes more narrow

  4. Small: App logo becomes smaller and search input becomes a button

Best Practices

Best Practices

Best Practices

1

Global

The app header should be displayed globally across all pages. It provides a familiar and persistent way for users to navigate. The app header should be hidden if a modal is open.

1

Global

The app header should be displayed globally across all pages. It provides a familiar and persistent way for users to navigate. The app header should be hidden if a modal is open.

1

Global

The app header should be displayed globally across all pages. It provides a familiar and persistent way for users to navigate. The app header should be hidden if a modal is open.

2

Consistent

The content of the app header should remain consistent across all pages. On unauthenticated pages (e.g., login), a version with only the logo may be used.

2

Consistent

The content of the app header should remain consistent across all pages. On unauthenticated pages (e.g., login), a version with only the logo may be used.

2

Consistent

The content of the app header should remain consistent across all pages. On unauthenticated pages (e.g., login), a version with only the logo may be used.

3

Fixed

If the page has scrollable content, the app header should remain fixed and visible at the top of the screen.

3

Fixed

If the page has scrollable content, the app header should remain fixed and visible at the top of the screen.

3

Fixed

If the page has scrollable content, the app header should remain fixed and visible at the top of the screen.

4

Hover States

Navigation items should display a visible hover state. If a nav item opens a menu or tooltip, the nav item should remain in an active state.

4

Hover States

Navigation items should display a visible hover state. If a nav item opens a menu or tooltip, the nav item should remain in an active state.

4

Hover States

Navigation items should display a visible hover state. If a nav item opens a menu or tooltip, the nav item should remain in an active state.

More

More

More

Related Pages

Additional Reading

© 2026 Basis Technologies
© 2026 Basis Technologies
© 2026 Basis Technologies