PHPackages                             humanmade/hm-url-tabs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. humanmade/hm-url-tabs

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

humanmade/hm-url-tabs
=====================

Tab-based navigation with rewrite endpoints for conditional block visibility

0.2.0(2mo ago)21.6k—0%GPL-2.0-or-laterJavaScriptCI passing

Since Nov 26Pushed 2mo agoCompare

[ Source](https://github.com/humanmade/hm-url-tabs)[ Packagist](https://packagist.org/packages/humanmade/hm-url-tabs)[ RSS](/packages/humanmade-hm-url-tabs/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (2)Versions (8)Used By (0)

HM URL Tabs
===========

[](#hm-url-tabs)

A WordPress plugin that allows editors to use the core navigation block to create tab-based navigation with rewrite endpoints for conditional block visibility.

Features
--------

[](#features)

- **Tab Navigation Variations**: Extends the core `navigation-link` block with three variations:

    - **Home Tab**: Links to the current page without any endpoint
    - **Base Tab**: Links to just the endpoint without a value (e.g., `/tab/`)
    - **Tab**: Links with a rewrite endpoint and value (e.g., `/tab/settings/`)
- **Rewrite Endpoints**: Registers filterable rewrite endpoints (default: `tab`) with `EP_ALL` mask
- **URL Rewriting**: Automatically rewrites navigation link URLs to use the current page with the appropriate endpoint
- **Dynamic Tab Visibility Controls**: Adds a "Tab Visibility" panel to all blocks (except navigation-link) that automatically appears when the page contains tab navigation (no refresh needed), with options to:

    - Always show the block
    - Show only when no endpoint is active
    - Show only when the endpoint is in use but has no value (e.g., `/tab`)
    - Show only for a specific tab value (e.g., `/tab/settings`)
- **Active State**: Automatically adds `hm-url-tab-active` class to the current tab link

Installation
------------

[](#installation)

1. Clone this repository into your `wp-content/plugins` directory
2. Run `npm install` to install dependencies
3. Run `npm run build` to build the assets
4. Activate the plugin through the WordPress admin

Usage
-----

[](#usage)

### Creating Tab Navigation

[](#creating-tab-navigation)

1. Add a Navigation block to your page
2. Insert a navigation link and select one of the tab variations:
    - **Home Tab**: Links to the page without any endpoint
    - **Base Tab**: Links to just the endpoint (e.g., `/tab/`) - useful for "All" or default views
    - **Tab**: Links to a specific tab value (e.g., `/tab/settings/`)
3. For regular tabs:
    - Set the label (e.g., "Settings")
    - Enter the tab slug in the URL field (e.g., "settings")
4. The final URL will be automatically built from the current page URL with the endpoint and slug on the frontend

### Controlling Block Visibility

[](#controlling-block-visibility)

When your page contains tab navigation links:

1. Select any block on the page (except navigation links)
2. Open the "Tab Visibility" panel in the block sidebar
3. Choose the display condition:
    - **Always show**: Block is always visible
    - **Show when no endpoint is active**: Block is only visible on the base page (Home Tab)
    - **Show when endpoint has no value**: Block is visible when accessing `/tab/` (Base Tab)
    - **Show for specific tab**: Block is only visible for the selected tab value

### Example

[](#example)

Create a settings page with tabbed sections:

```
Page URL: /settings

Navigation:
- Home Tab → /settings
- All Settings Tab (Base Tab) → /settings/tab/
- General Tab → /settings/tab/general/
- Privacy Tab → /settings/tab/privacy/

Blocks:
- Welcome message (Visibility: Show when no endpoint is active)
- All settings list (Visibility: Show when endpoint has no value)
- General settings (Visibility: Show for specific tab → general)
- Privacy settings (Visibility: Show for specific tab → privacy)

```

Customization
-------------

[](#customization)

### Adding Custom Endpoints

[](#adding-custom-endpoints)

You can register additional endpoints using the `hm_url_tabs_endpoints` filter:

```
add_filter( 'hm_url_tabs_endpoints', function( $endpoints ) {
	$endpoints[] = [
		'name' => 'section',
		'mask' => EP_ALL,
	];
	return $endpoints;
} );
```

When multiple endpoints are registered, a selector will appear in the navigation link settings to choose which endpoint to use.

Development
-----------

[](#development)

### Build Scripts

[](#build-scripts)

- `npm start`: Start development build with watch mode
- `npm run build`: Build production assets
- `npm run format`: Format code
- `npm run lint:js`: Lint JavaScript
- `npm run lint:js:fix`: Lint and fix JavaScript
- `npm run lint:css`: Lint CSS
- `npm run lint:css:fix`: Lint and fix CSS

### Local Development

[](#local-development)

Use WordPress Playground for local development:

```
npm run playground:start
```

This will start a WordPress instance at `http://localhost:9400` with the plugin activated.

### Testing

[](#testing)

Run Playwright tests:

```
npm run test:e2e           # Run tests
npm run test:e2e:debug     # Run tests in debug mode
npm run test:e2e:watch     # Run tests in watch mode
```

Filters
-------

[](#filters)

### `hm_url_tabs_endpoints`

[](#hm_url_tabs_endpoints)

Filters the registered tab endpoints.

**Parameters:**

- `$endpoints` (array): Array of endpoints with 'name' and 'mask' keys.

**Example:**

```
add_filter( 'hm_url_tabs_endpoints', function( $endpoints ) {
	$endpoints[] = [
		'name' => 'custom',
		'mask' => EP_PAGES,
	];
	return $endpoints;
} );
```

Technical Details
-----------------

[](#technical-details)

### Block Attributes

[](#block-attributes)

**Navigation Link (`core/navigation-link`):**

- `kind` (string): Set to "tab-home" for home tab, "tab-base" for base tab, or "tab" for regular tab
- `tabEndpoint` (string): The endpoint name to use (default: "tab")
- `url` (string): The URL slug for the tab (uses the standard navigation-link URL field, empty for Base Tab)

**All Other Blocks:**

- `hmUrlTabVisibility` (object):
    - `condition` (string): "always", "no-endpoint", "endpoint-empty", or "specific-tab"
    - `endpoint` (string): The endpoint name
    - `tabUrl` (string): The tab URL slug to match (for "specific-tab" condition)

### URL Structure

[](#url-structure)

- Base page: `/settings`
- Home tab: `/settings`
- Base tab (endpoint without value): `/settings/tab/`
- Tab with value: `/settings/tab/general/`

**Note**: Tab URL slugs are automatically lowercased for consistency (e.g., "Settings" becomes `/tab/settings/`). All generated URLs include a trailing slash.

License
-------

[](#license)

GPL-2.0-or-later

Author
------

[](#author)

Human Made Limited -

###  Health Score

38

—

LowBetter than 85% of packages

Maintenance84

Actively maintained with recent releases

Popularity24

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity30

Early-stage or recently created project

 Bus Factor1

Top contributor holds 90.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~31 days

Total

4

Last Release

80d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/77dbeefb7745010589603f2ffc6ff310d8f700b58e08d52af190744c43342526?d=identicon)[roborourke](/maintainers/roborourke)

---

Top Contributors

[![roborourke](https://avatars.githubusercontent.com/u/23417?v=4)](https://github.com/roborourke "roborourke (10 commits)")[![jdbg](https://avatars.githubusercontent.com/u/1889722?v=4)](https://github.com/jdbg "jdbg (1 commits)")

### Embed Badge

![Health badge](/badges/humanmade-hm-url-tabs/health.svg)

```
[![Health](https://phpackages.com/badges/humanmade-hm-url-tabs/health.svg)](https://phpackages.com/packages/humanmade-hm-url-tabs)
```

###  Alternatives

[rainlab/blog-plugin

Blog plugin for October CMS

17257.7k](/packages/rainlab-blog-plugin)[rainlab/builder-plugin

Builder plugin for October CMS

17147.2k1](/packages/rainlab-builder-plugin)[pfefferle/wordpress-activitypub

The ActivityPub protocol is a decentralized social networking protocol based upon the ActivityStreams 2.0 data format.

5671.4k1](/packages/pfefferle-wordpress-activitypub)[civicrm/civicrm-drupal-8

Open source constituent relationship management for non-profits, NGOs and advocacy organizations.

18238.1k2](/packages/civicrm-civicrm-drupal-8)[mediawiki/semantic-glossary

A terminology markup extension with a Semantic MediaWiki back-end

1352.4k](/packages/mediawiki-semantic-glossary)[humanmade/lottie-lite

A lightweight Lottie Animations Extension for WordPress

374.3k](/packages/humanmade-lottie-lite)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)