Link Tabs

Render tab triggers as anchors or router links.

Link tabs are a rendering concern: keep hrefs and router metadata in tab data, then use renderTabTrigger to render the tab trigger as an anchor or router component.

Tilery keeps the close button outside the trigger, so link tabs do not wrap button controls and can still close without triggering navigation or activation.

const layout: TileryInitialLayout<TabData> = {
  type: 'panel',
  id: 'routes',
  activeTabId: 'overview',
  tabs: [
    {
      id: 'overview',
      closable: false,
      data: {
        title: 'Overview',
        href: '/workspace/overview',
        body: 'This tab renders as an anchor while still using Tilery activation and drag behavior.',
      },
    },
    {
      id: 'settings',
      data: {
        title: 'Settings',
        href: '/workspace/settings',
        body: 'The close button remains a sibling of the anchor trigger, so the markup stays valid.',
      },
    },
    {
      id: 'reports',
      data: {
        title: 'Reports',
        href: '/workspace/reports',
        body: 'Router-link components can use the same slot by spreading Tilery props onto the link.',
      },
    },
  ],
};

<Tilery<TabData>
  initialLayout={layout}
  renderTabHeader={(tab: TileryTab<TabData>) => (
    <span>{tab.data.title}</span>
  )}
  renderTabTrigger={({ tab, props, children }) => (
    <a
      href={tab.data.href}
      {...props}
      onClick={(event) => event.preventDefault()}>
      {children}
    </a>
  )}
  renderTabContent={(tab: TileryTab<TabData>) => (
    <TabContent meta={tab.data.href}>
      <p style={{ margin: '0 0 12px' }}>{tab.data.body}</p>
      <p style={{ margin: 0 }}>
        The href belongs to the tab data. Tilery only supplies trigger
        props for selection, accessibility, and drag behavior.
      </p>
    </TabContent>
  )}
/>

Related