Ascern design system
Get startedBrandFoundationsGuidelinesComponentsPatterns
ComponentsNavigation

Settings navigation

In Settings the sidebar becomes the settings list: Back to app, a search box, then Your account and Agency. Typing swaps the groups for matching pages and settings.

Playground

Change the controls to try each prop. The code under the preview updates as you go and lists only the props you changed; copy it into your page.

import { SettingsNavigation } from '@/ui/settings-navigation';<SettingsNavigation backHref="?home" />

An Admin on the Members page: Back to app, the search box, then Your account and Agency. The page you are on is ink on the current fill. A page with no screen yet stays in the list, disabled, with a Coming soon tooltip, so the list doesn't shift when it ships. Press / to search.

import { SettingsNavigation } from '@/ui/settings-navigation';
import { account, agency, entries } from './data';

// An Admin on the Members page. Sandbox has no screen yet, so it stays in the list, disabled, with Coming soon. Press / to search.
export default function SettingsNavigationDefault() {
  return (
    <div className="rounded-xlarge bg-surface-sunken shadow-raised">
      <SettingsNavigation backHref="?home" groups={[account, agency]} currentHref="?settings=members" entries={entries} />
    </div>
  );
}

Typing swaps the groups for matches. A hit for a single setting shows its page on the right and opens the page scrolled to it. Nothing matching says so.

import { SettingsNavigation } from '@/ui/settings-navigation';
import { account, agency, entries } from './data';

// Typing swaps the groups for matches. A single setting shows its page on the right. Nothing matching says so.
export default function SettingsNavigationSearch() {
  return (
    <div className="grid gap-300 sm:grid-cols-2">
      <div className="rounded-xlarge bg-surface-sunken shadow-raised">
        <SettingsNavigation backHref="?home" groups={[account, agency]} entries={entries} defaultQuery="backup" />
      </div>
      <div className="rounded-xlarge bg-surface-sunken shadow-raised">
        <SettingsNavigation backHref="?home" groups={[account, agency]} entries={entries} defaultQuery="invoices" />
      </div>
    </div>
  );
}

A Member's list

A Member sees only Your account. The Agency group is for Owners and Admins, so it is hidden, not disabled.

import { SettingsNavigation } from '@/ui/settings-navigation';
import { account } from './data';

// A Member sees only Your account: the Agency group is for Owners and Admins, so it is hidden, not disabled.
export default function SettingsNavigationMember() {
  return (
    <div className="rounded-xlarge bg-surface-sunken shadow-raised">
      <SettingsNavigation backHref="?home" groups={[account]} currentHref="?settings=profile" />
    </div>
  );
}

Progress tracker

The steps of a guided task, with where you are and what is done. Job setup lists them down the left; CV out stacks them as numbered sections.

Side panel

The Flo panel's frame: docked on the right, the page still working beside it. Its body slides in over 200ms, out over 150ms, and the edge resizes it.

On this page

PlaygroundSidebarSearchA Member's list