Theme
← Blocks
Ecommerce Block family Storefront homepages and product/category pages

Store Navigation

Package branded storefront headers, collection navigation, and utility actions.

Preview

Open in new tab
Store navigation

Treat storefront navigation as a productized asset, not a one-off header.

Store navigation blocks align category structure, utility actions, and campaign notes.

Classic store header

Best for always-on storefronts.

Campaign store nav

Adds urgency and announcement space.

Editorial store nav

Blends story content and shopping entry points.

Variants

Classic store header

Brand, category nav, search, and cart action.

Campaign store nav

Launch-focused nav with announcement lane.

Editorial store nav

Content and shop blended in one header.

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, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Store navigation</Badge>
    <Heading level={1}>Treat storefront navigation as a productized asset, not a one-off header.</Heading>
    <Text as="p">Store navigation blocks align category structure, utility actions, and campaign notes.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open store nav</Button>
        <Button variant="outline">Pair with storefront page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Classic store header</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Best for always-on storefronts.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Campaign store nav</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Adds urgency and announcement space.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Editorial store nav</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Blends story content and shopping entry points.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>