Snapshot Cookie extension

Version 1.1

The Snapshot Cookie extension maintains the visible state of expanding menus on refresh and between page views, using a sessional cookie. Each time a menu is opened or closed the state of every visible menu is recorded, then on subsequent page views the recorded state is applied automatically.

Have a look at this expanding menu demo to see it in action - click open a few menus, and then hit "Refresh", and you should see your last selection persist (if you accept sessional cookies).


Download the Snapshot Cookie script, copy it into your udm-resources folder, and add the script include to the body section:

<!-- snapshot cookie extension -->
<script type="text/javascript"

What to use it for

This extension is designed to go with an expanding menu, because state-persistence is often useful with that kind of navigation. It cannot be used with dropdown or flyout menus.

Implementation notes

It takes between 5 and 30 bytes to record the state of each visible menu, so in practise it's unlikely to use more than a couple of hundreds bytes all told. This will obviously not work for anyone who doesn't accept sessional cookies.

Menu persistence is linked to the onload event - the navbar will render in a closed state, then open and position the relevant menus when loading is complete. To ensure the correct menus are opened, you must make sure that the <ul> structure is identical on each page. Otherwise, persistence is futile :D

Accessibility notes

Cookie persistence overrides the default visibility and positioning of menus, which in turn affects accessibility for browser-based screenreaders. In practise this is very unlikely to be an issue - screenreaders don't normally generate the events which set a snapshot cookie in the first place - they should never have the cookie, so there shouldn't be a problem.

But it is possible - maybe a person who uses a screenreader only some of the time, while the rest of the time they use the browser on its own. While doing so they might set a cookie, which affects them later when they access it with a reader. In this situation deleting the cookie will resolve it.


We would like your feedback! Take the UDM4 Survey!

UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.