Directory

The Directory module displays business listings, attractions, and other products from your Haven feed. It supports list views, category browsing, detail lightboxes, maps, and filters.

Basic setup

HTML structure

For a full directory page, use separate containers for breadcrumbs, filters, and the main app:

<div id="haven-container">
  <div id="haven-breadcrumb-directory"></div>
  <div id="haven-filter-directory"></div>
  <div id="haven-app"></div>
</div>

Initialization

haven.config({
  templatePath: 'https://YOUR_TEMPLATE_HOST/haven-templates/',
  userTemplates: [
    'haven-directory-list-item.html',
    'haven-directory-detail.html',
  ],
  useMapBox: true,
  useFontAwesome: true,
})
.directory.init({
  routing: {
    path: '/directory/',
    type: 'hash',
    titleSep: ' | ',
    doPathChange: true,
  },
  selector: '#haven-app',
  options: {
    id: 'haven-list',
    sort: 'name',
    titleTag: 'h3',
    css: 'haven__directory',
    cols: 1,
    maxWidth: 1280,
    includeMap: true,
    includeLightbox: true,
    categories: {
      include: ['YOUR_CAT_1', 'YOUR_CAT_2'],
    },
    breadcrumb: {
      enabled: true,
      selector: '#haven-breadcrumb-directory',
      rootLabel: 'Directory',
    },
    filter: {
      selector: '#haven-filter-directory',
      fields: {
        keyword: {
          type: 'search',
          id: 'haven-keyword-filter',
          name: 'k',
          placeholder: 'Filter by Keyword',
          minChars: 3,
        },
        types: {
          type: 'dropdown',
          id: 'haven-type-filter',
          name: 'types',
          dropdownText: {
            placeholder: 'Filter by Type',
          },
        },
      },
    },
  },
})
.render();

Formats

Format	Description
list	Standard product grid (default when using .directory.init())
category-list	Default internal format for multi-category directory
itinerary	Curated list — typically used with pre-fetched data
contactcard	Contact card layout
detail	Single product detail view
category	Category landing view

Set the format in .directory.init():

.directory.init({
  format: 'list',
  // ...
})

For itinerary layouts, pass pre-fetched data — see Fetching Data and Itinerary Sidebar.

Category scoping

Multiple categories

options: {
  categories: {
    include: ['ACCOMM', 'FOODDRINK', 'ATTRACTION'],
  },
}

Replace category codes with your Haven category nicenames.

Single category page

Lock the directory to one category using the shorthand API:

haven.config({ /* global */ })
  .render({
    type: 'directory',
    format: 'list',
    category: 'YOUR_CATEGORY',
    options: { /* ... */ },
  });

Or pass category to .directory.init():

.directory.init({
  category: 'YOUR_CATEGORY',
  options: { /* ... */ },
})

See Category Page example.

Layout options

Grid columns

options: {
  cols: 1,
  responsive: {
    600: { cols: 2 },
    1024: { cols: 3 },
  },
}

Max width and title

options: {
  maxWidth: 1280,
  titleTag: 'h3',
  showCategoryTitle: true,
  categoryTitleTag: 'h1',
}

Images

Configure imgix resizing per image type:

options: {
  images: {
    thumbnail: { ar: '3:2', w: 600, h: 400, fit: 'crop' },
    logo:      { ar: '3:2', w: 600, h: 400, fit: 'max' },
    featured:  { ar: '3:2', w: 1280, h: 400, fit: 'max' },
    banner:    { ar: '21:6', w: 1280, fit: 'crop' },
    gallery:   { ar: '16:9', w: 1280, fit: 'crop' },
  },
}

Parameter	Description
ar	Aspect ratio (e.g. '3:2', '16:9')
w	Width in pixels
h	Height in pixels (optional)
fit	Imgix fit mode: crop, max, clip, etc.

Routing

Directory supports hash and path-based URL routing for category and product detail navigation.

routing: {
  path: '/directory/',
  type: 'hash',       // or 'path' for clean URLs
  titleSep: ' | ',
  doPathChange: true,
  hashDocument: null, // set when embedding hash routing on a different page path
}

See Routing for hash vs path strategies and server configuration.

Related guides

• Maps and Lightbox — map markers, lightbox detail panel
• Filters and Search — keyword and type filters
• Custom Templates — override list and detail HTML
• Directory Options reference — complete option list

Full example

See Full Directory for a copy-paste recipe with all features enabled.