Theme
← Blocks
Marketing Block family Marketing nav bars and docs top-level navigation

Flyout Menus

Ship product and site navigation flyouts with grouped links and supporting copy.

Preview

Open in new tab
Navigation flyouts

Package a marketing flyout instead of inventing the menu every time.

Flyout menus are part of the catalog so site navigation can be composed like the rest of the page.

Product flyout

Grouped navigation for product areas and solutions.

Resource flyout

Collect docs, guides, and events in one surface.

Action flyout

Direct high-intent users to compare or contact flows.

Variants

Product flyout

Grouped product navigation with descriptions.

Resource flyout

Resources, docs, guides, and updates grouped together.

Action flyout

Quick route to compare, book, or contact.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Badge, Button, Card, Container, DescriptionList, Fieldset, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Marketing</Badge>
    <Heading level={1}>Package a marketing flyout instead of inventing the menu every time.</Heading>
    <Text as="p">Flyout menus are part of the catalog so site navigation can be composed like the rest of the page.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open flyouts</Button>
        <Button variant="outline">Use with headers</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Product flyout</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Grouped navigation for product areas and solutions.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Resource flyout</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Collect docs, guides, and events in one surface.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Action flyout</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Direct high-intent users to compare or contact flows.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>