EUI Tab Navigation

I designed a tabs component for Elastic UI (EUI): built around how analysts actually move through a workflow, not as a generic navigation primitive.

Context

Elastic UI is the design system behind Kibana and the other products analysts use to investigate their data. An analyst's workflow rarely lives in one view: they cross-reference, back out, and compare related contexts constantly. Without a real pattern for that movement, each product team was solving it its own way, or not solving it at all.

My role

I led the design of the tabs component itself, plus the decision criteria other designers need to adopt it correctly: this is the part that actually determines whether a pattern gets used the way it was designed to be used.

The problem

Tabs components aren't rare; plenty exist. The problem wasn't inventing one, it was designing one that matches how an analyst actually works, so switching context doesn't mean losing your place mid-task, plus drawing a clear line around when tabs are the right tool for a workflow and when they're not.

Draft gap (Laura): the specific analyst workflow this unblocked. What did people do before, and where exactly did they lose their place? A concrete before/after is stronger than the framing above.

Approach

A pattern is only reusable if the rules for using it are unambiguous. Alongside the visual and interaction design, the deliverable included the decision criteria other designers need: when tabs are the right answer for a workflow like this, when they're not, and how the pattern behaves as content scales past the comfortable case.

Draft gap (Laura): accessibility and keyboard semantics for the tab pattern: roving tabindex, ARIA, focus management. Worth stating explicitly; it's a differentiator.

What shipped

Draft gap (Laura): what landed in EUI, and which products adopted it. Adoption is the real measure of design-systems work, so any number you can share carries weight.