Tabs

2026.1

Requires Celeste 2026.1

Download Install in VSCode

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet facilisis sem, quis dignissim est congue a. Cras ultricies mi a mi elementum, quis faucibus ante euismod.

Aliquam vehicula lacinia sem, ac dignissim dolor fermentum eget. Donec ac massa quis ipsum mollis iaculis. Sed efficitur diam eget sapien efficitur, ultrices viverra nibh laoreet.

Mauris faucibus ex id leo vulputate, sit amet vehicula quam condimentum. Curabitur a nisi vitae neque blandit scelerisque. Duis nec mauris at lorem lobortis sodales. Aenean mattis fringilla tristique.

Properties

Prop Description
id Unique ID for this Accordion, defaults to tabs. Where there are multiple per page, always set this.
layout Layout of the navigation, vertical or horizontal
variant Navigation style variant. tabs (default), pills or segmented

Open an item with a link

You may open an item with a link by passing the ID of the item you wish to open. For example to open the first item in an Accordion with the id tabs, you can link to the item billing like this: /example/#tabs-billing.

How to use it

<Tabs>
	<Tabs.Nav>
		<Tabs.Tab icon="user" name="profile">Profile</Tabs.Tab>
		<Tabs.Tab icon="info" name="account">Account</Tabs.Tab>
		<Tabs.Tab icon="pound" name="billing">Billing</Tabs.Tab>
	</Tabs.Nav>

	<Tabs.Items>
		<Tabs.Item name="profile">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet facilisis sem, quis dignissim est congue a. Cras ultricies mi a mi elementum, quis faucibus ante euismod.</p>
		</Tabs.Item>

		<Tabs.Item name="account">
			<p>Aliquam vehicula lacinia sem, ac dignissim dolor fermentum eget. Donec ac massa quis ipsum mollis iaculis. Sed efficitur diam eget sapien efficitur, ultrices viverra nibh laoreet.</p>
		</Tabs.Item>

		<Tabs.Item name="billing">
			<p>Mauris faucibus ex id leo vulputate, sit amet vehicula quam condimentum. Curabitur a nisi vitae neque blandit scelerisque. Duis nec mauris at lorem lobortis sodales. Aenean mattis fringilla tristique.</p>
		</Tabs.Item>
	</Tabs.Items>
</Tabs>
Back to Top