🚧 Under development — suggestions for new items are always welcome! ✨

Vertical Tabs

A tiny css tweak to allow tabs to be displayed vertically.

vertical tabs demo

Install

pnpm dlx shadcn@latest add https://p.livog.com/r/vertical-tabs.json

Code

@media (min-width: 768px) {
  .tabs-field--vertical {
    display: flex;
    width: 100%;

    .tabs-field__tabs-wrap {
      min-width: 270px;
    }

    .tabs-field__tabs {
      display: flex;
      flex-direction: column;
      padding-left: var(--gutter-h);
      border-bottom: 0;
    }
    .tabs-field__content-wrap {
      flex-grow: 1;
    }
    .tabs-field__tab-button {
      padding: 10px 20px;
      border-bottom-width: 0;
      margin-right: 0;
      &:hover:after {
        width: 1px;
        height: 100%;
        bottom: 0;
        left: -1px;
      }
    }
    .tabs-field__tab-button--active::after {
      width: 2px;
      height: 100%;
      bottom: 0;
      left: -1px;
    }
  }
}

Usage


export const User: CollectionConfig = {
  slug: 'users',
  fields: [
    {
      type: 'tabs',
      label: 'Settings',
      admin: {
        className: 'tabs-field--vertical' // <---- all magic here
      },
      tabs: []
    }
  ]
}