Tabs

Explore interactive tab examples in Bramble UI. Create seamless navigation and organized content with customizable tabs.

Usage

Tab 1 content

Tab 2 content

Tab 3 content

Tab 4 content

import {Tabs } from '@/ui'
				
<Tabs
    className='mx-auto w-full max-w-md pt-12'
    defaultActiveId='tab1'
>
    <div
        id='tab1'
        title='Tab 1'
        className='active'
    >
        <div>Tab 1 content</div>
    </div>
    <div
        id='tab2'
        title='Tab 2'
    >
        <div>Tab 2 content</div>
    </div>
    <div
        id='tab3'
        title='Tab 3'
    >
        <div>Tab 3 content</div>
    </div>
    <div
        id='tab4'
        title='Tab 4'
    >
        <div>Tab 4 content</div>
    </div>
</Tabs>

Minimal Layout

Tab 1 content

Tab 2 content

Tab 3 content

Tab 4 content

<Tabs
	...
	minimal={true}
>

Icons

ReactJS

What is ReactJS?

ReactJS is a popular JavaScript library used for building user interfaces. It allows developers to create reusable UI components and efficiently update the interface when the data changes. ReactJS is known for its component-based architecture and virtual DOM (Document Object Model) manipulation.

NextJS

What is NextJS?

NextJS is a framework built on top of ReactJS. It provides additional features like server-side rendering, automatic code splitting, and simplified routing. NextJS is commonly used for building server-rendered React applications.

TailwindCSS

What is TailwindCSS?

TailwindCSS is a utility-first CSS framework that provides a set of pre-defined classes to style HTML elements. It aims to give developers more control over the design by providing a highly customizable utility class approach. It is often used in conjunction with ReactJS or other frontend frameworks.

import {Tabs, ReactIcon, NextIcon, TailwindIcon } from '@/ui'
				
<Tabs
	className='mx-auto w-full max-w-lg'
	defaultActiveId='tab0'
	icons={[<ReactIcon />, <NextIcon />, <TailwindIcon />]} // add icons in correct order
>
	{data.map((item, index) => (
		<div
			id={`tab${index}`}
			key={`tab${index}`}
			title={item.name}
			className={`${index === 0 ? 'active' : ''}`}
		>
			<h3>{item.name}</h3>
			<div dangerouslySetInnerHTML={{ __html: item.body }} />
		</div>
	))}
</Tabs>

Emojis

apples

Some content about apples

bananas

Some content about bananas

grapes

Some content about grapes

lemons

Some content about lemons

import {Tabs } from '@/ui'

const data = [
	{ name: 'apples', emoji: '🍏', body: '<p>Some content about <strong>apples</strong></p>' },
	{ name: 'bananas', emoji: '🍌', body: '<p>Some content about <strong>bananas</strong></p>' },
	{ name: 'grapes', emoji: '🍇', body: '<p>Some content about <strong>grapes</strong></p>' },
	{ name: 'lemons', emoji: '🍋', body: '<p>Some content about <strong>lemons</strong></p>' },
]
				
<Tabs
	className='mx-auto w-full max-w-md pt-12'
	defaultActiveId='tab0'
	tabStyles='text-3xl'
>
	{data.map((item, index) => (
		<div
			id={`tab${index}`}
			key={`tab${index}`}
			title={item.emoji}
			className={`${index === 0 ? 'active' : ''}`}
		>
			<h3>{item.name}</h3>
			<div dangerouslySetInnerHTML={{__html: item.body}}/>
		</div>
	))}
</Tabs>

Examples

User Log-in / Register

import { Tabs } from '@/ui'
import { Login, Register } from '@/features'
				
<Tabs
    className='w-full pt-12'
    defaultActiveId='LogIn'
>
    <div
        id='LogIn'
        title='Log In'
        className='active'
    >
        <Login
            method='dialog'
            onSubmit={handleSubmit}
        />
    </div>
    <div
        id='SignUp'
        title='Sign Up'
    >
        <Register
            method='dialog'
            onSubmit={handleSubmit}
        />
    </div>
</Tabs>