Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PatternsContext switcher

Context switcher

Switches the organisation, partner or branch you are working in: a trigger showing the current one over a list of the caller's own switch forms.

<koala-context-switcher>

Card trigger

Give it a label and the trigger becomes a card naming what is being switched. The caller passes items so the trigger can draw the current one, then writes each row as its own form holding a koala-context-switcher-option button. The component draws the row; the form decides where the switch posts.

label="Branch"
Branches
Nothing found

Button trigger

Without a label it is a compact top-bar button: the avatar, the name from extra-large screens up, and a chevron. Organisation and partner items draw an entity avatar from AvatarImageSrc, falling back to initials. With no group label the heading is inferred from the items when they are all organisations or all partners.

Organisations
Organisations
Nothing found
Partners
Partners
Nothing found

In the rail

variant="rail" is the workspace rail's switcher. collapse-state is the Alpine expression that hides the name when the rail is collapsed, and collapse-state-initial tells the server which geometry to paint first so the rail does not jump on load. From small screens up the panel flies out beside the rail. Toggle the rail to see the collapsed trigger.

variant="rail"
Branches
No branches found

Searching a long list

Past six items the panel grows a search box, focused as it opens, that filters the rows by name. search-placeholder and empty-label word it for what is being listed.

Eight branches
Branches
No branches found

API

items IReadOnlyList<ContextSwitcherItem>
label string: switches to the card trigger
variant buttoncardrail
group-label string (OrganisationsPartnersOptions when inferred)
search-placeholder string
empty-label string
align leftright
collapse-state Alpine expression
collapse-state-initial bool
data-analytics analytics event prefix
koala-context-switcher-option ContextSwitcherItem, on the caller's submit button
ContextSwitcherItem AvatarKind IconOrganisationPartner
ContextSwitcherItem IsCurrent bool
ContextSwitcherItem Icon IconName (default DomainIcon.Branch)
ContextSwitcherItem AvatarImageSrc url