Join us for a Live Demo & Q&A Session
Directus Logo
  • Use Cases and Features
    • Headless CMS
      Manage and deliver content with ease
    • Backend-as-a-Service
      Build and ship applications faster
    • Headless Commerce
      A single source of truth for products
    • 100+ More Use Cases
      Build anything (or everything)
    • Instant APIs
      Connect a database, get REST + GraphQL APIs
    • Granular Policy-Based Auth
      Provide secure, autonomous data access
    • Visual Automation Builder
      Automate content and data workflows with ease
    • 50+ More Features
      Get everything you need out-of-the-box
    Project Showcase
    Built With Directus

    Built With Directus

    See what everyone's been building with Directus

  • Learn More
    • Blog
      Read our latest articles and guides
    • Case Studies
      Case studies and success stories
    • Community
      Join our new community forum.
    • Agency Directory
      Browse our list of agency partners
    • About Us
      Learn more about Directus and the team
    • Wall of Love
      See what others are saying about us
    • Contact
      Have a general inquiry or question for us?
    • Support
      Reach out to Directus support
    Watch Directus TV
    Directus TV
    Video

    Directus TV

    Go down the rabbit hole with hours of original video content from our team.

  • Developers
  • Enterprise
  • Pricing
Get a Technical DemoTry Cloud Free
GitHub logo32,121
Directus Marketplace
Marketplace
  1. Extensions
  2. Integrations
  3. Templates
Back to Extensions
interface

Group Tabs Interface

A tab group interface for Directus. This interface allows you to group fields into tabs as an alternative to the default accordion group.

Directus Tab Group Interface

A tab group interface for Directus. This interface allows you to group fields into tabs as an alternative to the default accordion group.

Screenshot of the tab group interface

Installation

Add directus-extension-group-tabs-interface to your project:

# Using pnpm
pnpm add directus-extension-group-tabs-interface
# Using yarn
yarn add directus-extension-group-tabs-interface
# Using npm
npm install directus-extension-group-tabs-interface

Usage

When creating a new field you can select Tab Group in the Groups section.

Alternatively you can change the interface of an existing group field in the Interface section.

Options

  • Overwrite Group Width: If checked, force Directus to display the tab list in the "Fill Width" mode. Normally, the width option is not available for groups, but so far no problems have been encountered. Please open an issue if you encounter any visual bugs.

directus-extension-group-tabs-interface

npm i directus-extension-group-tabs-interface
This extension is sandboxed and can be installed through the Directus Marketplace. Learn more.
hanneskuettner
36.0k Total Downloads
2.0.0
Works with v10.1.0+
Updated 1 year ago
GPL-3.0 License
56.6 KiB (4 files)
npm
Repository
Report Issue
  • Directus LogoDirectus Logo

    A composable backend to build your Headless CMS, BaaS, and more. 

  • Solutions
    • Headless CMS
    • Backend-as-a-Service
    • Product Information
    • 100+ Things to Build
  • Resources
    • Documentation
    • Guides
    • Community
    • Release Notes
  • Support
    • Issue Tracker
    • Feature Requests
    • Community Chat
    • Cloud Dashboard
  • Organization
    • About
    • Careers
    • Brand Assets
    • Contact
©2025 Monospace Inc
  • Cloud Policies
  • License
  • Terms
  • Privacy