App Tabs

Responsive primary navigation

Headline

This is normal text in the app.

<AppTabs action={tabAction} tabs={tabLinks} menu={demoMenu}>
	<h4>Headline</h4>

	<p>This is normal text in the app.</p>
</AppTabs>

Primary navigation for the application that responds to the container width, going from a bottom tab bar to leading-side navigation.

On small screens, the icons are fixed to the bottom of the screen with the action in the middle:

Headline

This is normal text in the app.

At 45rem, the icons move to the leading side with the action at the end and menu at the bottom.

Headline

This is normal text in the app.

At 60rem, visible labels are added.

Headline

This is normal text in the app.

The component uses container queries, so it can be used for side-panel navigation as well and will respond accordingly. If this is the global navigation, adding the global prop will make the component full-height as well as adding some padding at the end to clear the iPhone home indicator. (See this site to see it in action. 😎)