tabs and modes

Custom. Provide tabbed alternatives (tabs/tab) and richer mode panels (modes/mode) for CLI, PowerShell, Portal etc. Supports query parameter and persistence.

Note that this page was generated by Agent mode in GitHub Copilot and then manually modified.

Purpose

These shortcodes let you present alternative instructions or code paths (e.g. Bash vs PowerShell, or Portal vs CLI) in a compact UI. They are progressively enhanced by a small JavaScript file so content still appears (all expanded) if JavaScript is disabled.

tabs + tab: Lightweight code/text variants.
modes + mode: Rich, bordered panels (steps, images, code, notes).
Unified query parameter override: ?tabs=bash or ?tabs=powershell.
Persistence: last chosen variant remembered across pages.

Shortcodes

Container	Child	Use Case
`tabs`	`tab`	Short code or textual alternatives
`modes`	`mode`	Longer instructions, mixed content

Query Parameter & Persistence

Append ?tabs=<name> (normalized to lowercase, alphanumeric only) to a page URL. All groups will attempt to activate the matching variant. Choices are stored in localStorage (global and per-group) so a user’s preference carries over.

When a user manually clicks a tab or mode, the current page URL is updated (via history.replaceState) to set ?tabs=<normalized-key> without causing a reload. This lets you copy/share a link that preserves the active variant.

Examples:

?tabs=bash
?tabs=powershell
?tabs=powershell,bash (comma list; first match per group wins)

Normalization

Display title → key transformation: lowercase + strip non-alphanumeric.

Title	Key
Bash	`bash`
PowerShell	`powershell`
Azure CLI	`azurecli`
Portal (UI)	`portalui`

tabs shortcode (tabs/tab)

Raw tabs

Raw example so the shortcode is shown literally:

{{< tabs default="Bash" >}}
{{< tab title="Bash" >}}
```bash
az group create --name rg1 --location westeurope
```
{{< /tab >}}
{{< tab title="PowerShell" >}}
```powershell
New-AzResourceGroup -Name rg1 -Location westeurope
```
{{< /tab >}}
{{< /tabs >}}

Rendered tabs

Authenticate
```
az login
```
```
Connect-AzAccount
```

Show current context

az account show --output jsonc

Get-AzContext | Format-List

modes/mode shortcodes

Raw modes example

{{< modes default="Portal" >}}
  {{< mode title="Portal" >}}

  1. Open the Azure Portal.
  1. Create a resource group.

  {{< /mode >}}
  {{< mode title="Bash" >}}

  1. Authenticate

      ```shell
      az login
      ```

  1. Create a resource group

      ```shell
      az group create --name rg1 --location westeurope
      ```

  {{< /mode >}}
  {{< mode title="PowerShell" >}}

  1. Authenticate

      ```shell
      Connect-AzAccount
      ```

  1. Create a resource group

      ```shell
      New-AzResourceGroup -Name rg1 -Location westeurope
      ```

  {{< /mode >}}
{{< /modes >}}

Rendered modes example

Open the Azure Portal.
Create a resource group.

Authenticate
```
az login
```

Create a resource group

az group create --name rg1 --location westeurope

Authenticate
```
Connect-AzAccount
```