# code-snippets/3.10.0-beta.1/js/components/common/SubnavTabs.tsx

Code Snippets, version 3.10.0-beta.1. 77 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.10.0-beta.1/code/js/components/common/SubnavTabs.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.10.0-beta.1/raw/js/components/common/SubnavTabs.tsx
- Modified: 2026-08-04T13:38:10+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/3.10.0-beta.1/code/js/components/common/SubnavTabs.tsx#L10-L20`.

```tsx
import classnames from 'classnames'
import { __ } from '@wordpress/i18n'
import React from 'react'
import { isLicensed } from '../../utils/screen'
import { fetchQueryParam, updateQueryParams } from '../../utils/urls'

export interface SubnavTab {
	name: string
	label: string
	pro?: boolean
}

export const getTabFromQuery = <Tab extends SubnavTab>(
	tabs: Tab[],
	queryParamName: string
): Tab => {
	const tabParam = fetchQueryParam(queryParamName)

	for (const tab of tabs) {
		if (tab.name === tabParam) {
			return tab
		}
	}

	return tabs[0]
}

export interface SubnavTabsProps<Tab extends SubnavTab> {
	tabs: readonly Tab[]
	ariaLabel: string
	className?: string
	currentTab: Tab
	getTabCount?: (tab: Tab) => number | undefined
	setCurrentTab: (tab: Tab) => void
	queryParamName?: string
}

export const SubnavTabs = <Tab extends SubnavTab>({
	tabs,
	ariaLabel,
	className,
	currentTab,
	getTabCount,
	setCurrentTab,
	queryParamName,
}: SubnavTabsProps<Tab>) =>
	<nav className={classnames('snippet-type-nav', className)} aria-label={ariaLabel}>
		<ul>
			{tabs.map(tab => {
				const count = getTabCount?.(tab)

				return (
					<li key={tab.name}>
						<button
							type="button"
							className={classnames('snippet-type-link', `${tab.name}-subnav-link`, {
								'active-type': tab.name === currentTab.name
							})}
							aria-current={tab.name === currentTab.name ? 'page' : undefined}
							onClick={() => {
								setCurrentTab(tab)

								if (queryParamName) {
									updateQueryParams({ [queryParamName]: tab.name })
								}
							}}
						>
							<span>{tab.label}</span>
							{count && <span className="subnav-count">{count}</span>}
							{tab.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
						</button>
					</li>
				)
			})}
		</ul>
	</nav>

```