Possible to use Tab component as navigation links?

[mathewgurney]

Hi! I've noticed on the Vercel dashboard page that the tab component is used to navigate between dashboard views. Is it possible to use the Geist UI component to achieve this same effect? (Make each tab a link)

[unix]

This requires that the label prop be able to accept the jsx.element, but this will also have an effect on the default value of value (the default selected link will also be strange), this feature should not be implemented anytime soon.

[dmcleish91]

I believe these examples should be added to the documentation for Tabs as use case example. Thoughts? @unix

[ofekashery]

Hi @matgurney, if you are using Next.js it might help you:

import React from 'react';
import { Tabs } from '@geist-ui/react';
import { useRouter } from 'next/router';

const Menu = () => {
  const router = useRouter();

  return (
    <Tabs value={router.pathname} onChange={(route) => router.push(route)}>
      <Tabs.Item label="Overview" value="/" />
      <Tabs.Item label="Projects" value="/projects" />
      <Tabs.Item label="Integrations" value="/integrations" />
      <Tabs.Item label="Activity" value="/activity" />
      <Tabs.Item label="Domains" value="/domains" />
      <Tabs.Item label="Usage" value="/usage" />
      <Tabs.Item label="Settings" value="/settings" />
    </Tabs>
  );
};

export default Menu;

[mathewgurney]

@ofekashery this works great, thanks so much!

[sesto-dev]

Do you know how can this be implemented using react-router?

[ofekashery]

@Accretence With react-router:

import React from 'react';
import { Tabs } from '@geist-ui/react';
import { useHistory, useLocation } from 'react-router-dom';

const Menu = () => {
  const location = useLocation();
  const history = useHistory();

  return (
    <Tabs value={location.pathname} onChange={(route) => history.push(route)}>
      <Tabs.Item label="Overview" value="/" />
      <Tabs.Item label="Projects" value="/projects" />
      <Tabs.Item label="Integrations" value="/integrations" />
      <Tabs.Item label="Activity" value="/activity" />
      <Tabs.Item label="Domains" value="/domains" />
      <Tabs.Item label="Usage" value="/usage" />
      <Tabs.Item label="Settings" value="/settings" />
    </Tabs>
  );
};

export default Menu;

[sesto-dev]

Wow thank you for responding so fast ❤ Works like a charm.