Feature flags in the header

foundation-header can show a Feature Flags control on the right-hand side of the navigation bar. Users open a panel with a multiselect of flags you define; changing the selection updates URL feature.* query parameters and reloads the page so boot-time consumers re-evaluate the flags.

The button appears when featureFlagOptions.availableFlags is non-empty.

Platform version 14.498.0**

Enable the Feature Flags control

Pass a featureFlagOptions object whose availableFlags list names each flag and its display label. Each name maps to a URL parameter of the form feature.<name>.

React

import { FoundationHeader } from '@genesislcap/foundation-header/react';
import type { FeatureFlagOptions } from '@genesislcap/foundation-header';

const featureFlagOptions: FeatureFlagOptions = {
  availableFlags: [
    { name: 'ai', label: 'AI' },
    { name: 'forceHttp', label: 'Force HTTP' },
  ],
};

export default function HeaderFeatureFlagsExample() {
  return <FoundationHeader featureFlagOptions={featureFlagOptions} />;
}

Genesis

import type { FeatureFlagOptions } from '@genesislcap/foundation-header';

const featureFlagOptions: FeatureFlagOptions = {
  availableFlags: [
    { name: 'ai', label: 'AI' },
    { name: 'forceHttp', label: 'Force HTTP' },
  ],
};

@customElement({
  name: 'header-feature-flags-example',
  template: html`
    <foundation-header
      :featureFlagOptions=${() => featureFlagOptions}
    ></foundation-header>
  `,
})
export class HeaderFeatureFlagsExample extends GenesisElement {}

Angular

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import type { FeatureFlagOptions } from '@genesislcap/foundation-header';

@Component({
  selector: 'header-feature-flags-example',
  template: `
    <foundation-header [featureFlagOptions]="featureFlagOptions"></foundation-header>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class HeaderFeatureFlagsExampleComponent {
  featureFlagOptions: FeatureFlagOptions = {
    availableFlags: [
      { name: 'ai', label: 'AI' },
      { name: 'forceHttp', label: 'Force HTTP' },
    ],
  };
}

Example

featureFlagOptions

Field	Type	Description
availableFlags	{ name: string; label: string }[]	Flags offered in the multiselect. name is written to the URL as feature.<name>; label is the UI text.

When availableFlags is empty or omitted, the Feature Flags control stays hidden.

URL behaviour

Selected flags are written as presence-style query parameters via setActivatedFeatures from @genesislcap/foundation-utils:

https://your-app.com/home?feature.ai=true&feature.forceHttp=true

• Selecting flags rewrites all feature.* params to match the selection and reloads by default.
• Deselecting every flag clears the feature.* params and reloads.
• Elsewhere in the app, use isFeatureActivated('ai') (or getActivatedFeatures()) to branch behaviour.

URL feature flags are visible to users — do not use them for security-sensitive controls.

Events

When the multiselect selection changes, the header emits feature-flags-changed before updating the URL and reloading. The event detail is the array of selected flag names (string[]).

React

import { FoundationHeader } from '@genesislcap/foundation-header/react';
import type { FeatureFlagOptions } from '@genesislcap/foundation-header';

const featureFlagOptions: FeatureFlagOptions = {
  availableFlags: [
    { name: 'ai', label: 'AI' },
    { name: 'forceHttp', label: 'Force HTTP' },
  ],
};

export default function HeaderFeatureFlagsEventsExample() {
  return (
    <FoundationHeader
      featureFlagOptions={featureFlagOptions}
      onfeature-flags-changed={(e: CustomEvent<string[]>) => console.log(e.detail)}
    />
  );
}

Genesis

html`
  <foundation-header
    :featureFlagOptions=${() => featureFlagOptions}
    @feature-flags-changed=${(x, c) => x.onFeatureFlagsChanged(c.event)}
  ></foundation-header>
`

Angular

<foundation-header
  [featureFlagOptions]="featureFlagOptions"
  (feature-flags-changed)="onFeatureFlagsChanged($event)"
></foundation-header>

Parts

Part	Description
feature-flags-wrapper	Wrapper around the Feature Flags control
feature-flags-button	The Feature Flags button
feature-flags-panel	The panel that hosts the multiselect

Related reading

• Feature flag utilities — isFeatureActivated, getActivatedFeatures, setActivatedFeatures
• Header — attributes, properties, and events reference