Description

The tabs pattern allows you to collect tabs that do not fit in the width of the window, in a drop down menu.

Documentation

The collapsing tabs pattern is used to to solve the problem where the tabs on certain screen sizes or in certain languages don't all fit in the horizontal space.

The pattern is applied on markup similar to:

1. The script measures the size of the container element with 'pat-tabs' on it.
2. The script measures the width (including padding and border) of link in the container and adds the sizes up.
3. The tabs that together in width exceed the width of the container are enclosed in a span tag <span class="extra-tabs">.

The resulting markup:

CSS will turn this span into a drop down that works on touch and non-touch screens.

The script runs at page load when the dom is ready, it runs again when the browser window is being resized and when a parent layout modifying Pattern — such as pat-switch — is triggered.

Option reference

This pattern does not have an special configuration properties.