Tabs

View Original

Tabs organize content into multiple panels, allowing users to navigate between them. They support keyboard navigation, icons, and badges.

Goshtoso Component

Go + Templ

Default Tabs

Groups tab is selected

Likes tab is selected

Comments tab is selected

Saved tab is selected

Tabs with Icon

Groups tab is selected

Likes tab is selected

Comments tab is selected

Saved tab is selected

Tabs with Icon and Badge

Groups tab is selected

Likes tab is selected

Comments tab is selected

Saved tab is selected

Tabs with HTMX Lazy Loading

Overview tab is selected

Tabs with URL Hash Sync

Selected tab syncs with the URL fragment. Try switching tabs — the hash updates. Refresh with #comments in the URL.

Groups tab is selected

Likes tab is selected

Comments tab is selected

Saved tab is selected

Usage Example

// Default Tabs
@tabs.Tabs(tabs.Config{
    ID: "demo",
    Tabs: []tabs.Tab{
        {ID: "groups", Label: "Groups", Content: groupsContent()},
        {ID: "likes", Label: "Likes", Content: likesContent()},
        {ID: "comments", Label: "Comments", Content: commentsContent()},
        {ID: "saved", Label: "Saved", Content: savedContent()},
    },
})

// Tabs with Icons
@tabs.Tabs(tabs.Config{
    ID: "icon-demo",
    Tabs: []tabs.Tab{
        {ID: "groups", Label: "Groups", Icon: groupsIcon(), Content: groupsContent()},
        {ID: "likes", Label: "Likes", Icon: likesIcon(), Content: likesContent()},
    },
})

// Tabs with Icons and Badges
@tabs.Tabs(tabs.Config{
    ID: "badge-demo",
    Tabs: []tabs.Tab{
        {ID: "groups", Label: "Groups", Icon: groupsIcon(), Badge: "2", Content: groupsContent()},
        {ID: "likes", Label: "Likes", Icon: likesIcon(), Badge: "3124", Content: likesContent()},
    },
})

// Tabs with HTMX Lazy Loading
@tabs.Tabs(tabs.Config{
    ID: "htmx-demo",
    Tabs: []tabs.Tab{
        {ID: "overview", Label: "Overview", Content: overviewContent()},
        {ID: "details", Label: "Details", HTMX: &tabs.TabHTMX{Get: "/api/components/tab-content/details"}},
        {ID: "activity", Label: "Activity", HTMX: &tabs.TabHTMX{Get: "/api/components/tab-content/activity"}},
    },
})

// Tabs with URL Hash Sync
@tabs.Tabs(tabs.Config{
    ID:       "my-tabs",
    SyncHash: true,
    Tabs: []tabs.Tab{
        {ID: "members", Label: "Members", Content: membersContent()},
        {ID: "clusters", Label: "Clusters", Content: clustersContent()},
    },
})

Table Button