> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# ParameterPath

Shows where in a request a parameter lives — the method, then each container down to the parameter itself, with the last segment highlighted and carrying a bolt when `attack` marks it as the one that was hit. Copying a path yields a `FilterInput` query rather than the text on screen — `method = "POST" AND parameter = "JSON.nginx_config"` — so a finding can be pasted straight into a search.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/ParameterPath) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/data-display-parameterpath--overview)

```tsx
import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';

export const FullPath = () => (
  <ParameterPath
    data-testid='parameter-path'
    method='POST'
    segments={['JSON', 'nginx_config']}
    encoding='BASE64'
    attack
  />
);
```

## Usage

```tsx
import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';
```

## Examples

### No encoding

With no `encoding` the trailing chip simply goes, and the path ends on the parameter.

```tsx
import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';

export const NoEncoding = () => (
  <ParameterPath method='GET' segments={['query', 'filter']} attack />
);
```

### Path index bola

A numeric segment: `path › 2` is the second element of the URL path, which is how a BOLA
finding points at a resource id rather than a named field.

```tsx
import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';

export const PathIndexBola = () => (
  <ParameterPath method='GET' segments={['path', '2']} attack />
);
```

### Header

The container need not be a body — here the parameter is a request header, and the first
segment is what says so.

```tsx
import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';

export const Header = () => (
  <ParameterPath method='GET' segments={['header', 'X-Forwarded-For']} attack />
);
```

### Cookie

The same shape for a cookie: first segment names where the value came from, last names
the value.

```tsx
import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';

export const Cookie = () => (
  <ParameterPath method='POST' segments={['cookie', 'session_id']} attack />
);
```

### Deep nested truncated

Seven segments in 280px: the middle collapses to an ellipsis and the full path moves into
a tooltip. The truncation is measured, not a CSS clip, so it reacts to the real width.

```tsx
import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';

export const DeepNestedTruncated = () => (
  <div style={{ width: 280 }}>
    <ParameterPath
      data-testid='parameter-path'
      method='POST'
      segments={['multipart', 'json_abc', 'json_doc', 'qwerty_doc', 'hash', 'formData', 'get']}
      attack
    />
  </div>
);
```

### No method

`method` is optional — leave it out where the row around the path already says which
request this belongs to.

```tsx
import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';

export const NoMethod = () => (
  <ParameterPath segments={['cookie', 'session_id']} attack />
);
```

### Expandable truncated

`expandable` makes a truncated path clickable and focusable: it opens inline to show every
segment, and the tooltip stands down while it is open.

```tsx
import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';

export const ExpandableTruncated = () => (
  <div style={{ width: 600 }}>
    {/* The root is w-full (it must span the available space to measure it),
        so centering happens inside the component, not on the container. */}
    <ParameterPath
      data-testid='parameter-path'
      className='justify-center'
      method='POST'
      segments={[
        'multipart',
        'json_abc',
        'json_doc',
        'qwerty_doc',
        'hash',
        'formData',
        'session_token',
        'nested_payload',
        'get',
      ]}
      attack
      expandable
    />
  </div>
);
```

### Expandable fits inline

The same path given room to fit. `expandable` leaves no affordance behind when there is
nothing to expand — no ellipsis, no cursor, no focus stop.

```tsx
import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';

export const ExpandableFitsInline = () => (
  <div style={{ width: 720, display: 'flex', justifyContent: 'center' }}>
    <ParameterPath
      data-testid='parameter-path'
      method='POST'
      segments={['multipart', 'json_abc', 'json_doc', 'qwerty_doc', 'hash', 'formData', 'get']}
      attack
      expandable
    />
  </div>
);
```

### Playground

The props on controls, for trying a segment list or a method the stories above skip.

```tsx
import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';

export const Playground = () => <ParameterPath />;
```

### Gallery

The shapes together, as they would read down a column of findings — with a narrow cell at
the bottom to show what happens when the column is the constraint.

```tsx
import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';
import { VStack } from '@wallarm-org/design-system/Stack';

export const Gallery = () => (
  <VStack gap={16}>
    <ParameterPath method='POST' segments={['JSON', 'nginx_config']} encoding='BASE64' attack />
    <ParameterPath method='GET' segments={['query', 'filter']} attack />
    <ParameterPath method='GET' segments={['path', '2']} attack />
    <ParameterPath method='GET' segments={['header', 'X-Forwarded-For']} attack />
    <ParameterPath method='POST' segments={['cookie', 'session_id']} attack />
    <div style={{ width: 280 }}>
      <ParameterPath method='POST' segments={['multipart', 'a', 'b', 'c', 'd', 'get']} attack />
    </div>
  </VStack>
);
```

## Props

| Prop             | Type                                                 | Default          | Description                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ---------------- | ---------------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| method           | `HttpMethodName \| undefined`                        |                  |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| segments \*      | `string[]`                                           |                  |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| encoding         | `string \| undefined`                                |                  |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| attack           | `boolean \| undefined`                               | `false`          |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| expandable       | `boolean \| undefined`                               | `false`          | Opt in to click-to-expand. When `true`, a _truncated_ path becomes interactive: clicking the `…` collapse indicator (or the path) expands it inline to show every segment, and clicking again collapses it back to `first … last`. No effect when the path already fits without truncation. `expandable` only controls the affordance (whether the user can toggle); the open/closed state is owned by `expanded` / `defaultExpanded`. |
| expanded         | `boolean \| undefined`                               |                  | Controlled expanded state. When provided, the component does not manage its own state — pair it with \{@link onExpandedChange}.                                                                                                                                                                                                                                                                                                        |
| defaultExpanded  | `boolean \| undefined`                               | `false`          | Initial expanded state for the uncontrolled case. Ignored when `expanded` is provided. Defaults to `false`.                                                                                                                                                                                                                                                                                                                            |
| onExpandedChange | `((expanded: boolean) => void) \| undefined`         |                  | Called with the next expanded state whenever the user toggles the path. Required for controlled usage; also useful for analytics in the uncontrolled case.                                                                                                                                                                                                                                                                             |
| copyFormat       | `((data: CopyFormatData) => string) \| undefined`    | `formatAsFilter` |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| title            | `string \| undefined`                                |                  |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| defaultChecked   | `boolean \| undefined`                               |                  |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| defaultValue     | `string \| number \| readonly string[] \| undefined` |                  |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| autoFocus        | `boolean \| undefined`                               |                  |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| id               | `string \| undefined`                                |                  |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| tabIndex         | `number \| undefined`                                |                  |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| rel              | `string \| undefined`                                |                  |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| onChange         | `ChangeEventHandler<T, Element> \| undefined`        |                  |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| data-testid      | `string \| undefined`                                |                  |                                                                                                                                                                                                                                                                                                                                                                                                                                        |