diff --git a/core/src/main/scala/com/lightbend/paradox/ParadoxProcessor.scala b/core/src/main/scala/com/lightbend/paradox/ParadoxProcessor.scala
index ee272b18..64307e81 100644
--- a/core/src/main/scala/com/lightbend/paradox/ParadoxProcessor.scala
+++ b/core/src/main/scala/com/lightbend/paradox/ParadoxProcessor.scala
@@ -43,6 +43,8 @@ class ParadoxProcessor(reader: Reader = new Reader, writer: Writer = new Writer)
     navigationDepth:    Int,
     pageTemplate:       PageTemplate,
     errorListener:      STErrorListener): Seq[(File, String)] = {
+    require(!groups.values.flatten.map(_.toLowerCase).groupBy(identity).values.exists(_.size > 1), "Group names may not overlap")
+
     val pages = parsePages(mappings, Path.replaceSuffix(sourceSuffix, targetSuffix))
     val paths = Page.allPaths(pages).toSet
     val globalPageMappings = rootPageMappings(pages)
diff --git a/core/src/main/scala/com/lightbend/paradox/markdown/Groups.scala b/core/src/main/scala/com/lightbend/paradox/markdown/Groups.scala
index 6ed09a14..2a35feab 100644
--- a/core/src/main/scala/com/lightbend/paradox/markdown/Groups.scala
+++ b/core/src/main/scala/com/lightbend/paradox/markdown/Groups.scala
@@ -19,8 +19,8 @@ package com.lightbend.paradox.markdown
 object Groups {
   def html(supergroups: Map[String, Seq[String]]) = {
     supergroups.map {
-      case (_, groups) =>
-        """<select class="supergroup">""" +
+      case (supergroup, groups) =>
+        s"""<select class="supergroup" name="$supergroup">""" +
           groups.map(group => s"""<option class="group" value="group-${group.toLowerCase}">$group</option>""").mkString +
           "</select>"
     }.mkString("\n")
diff --git a/themes/generic/src/main/assets/js/page.js b/themes/generic/src/main/assets/js/page.js
index a55dd0ea..241bc7fa 100644
--- a/themes/generic/src/main/assets/js/page.js
+++ b/themes/generic/src/main/assets/js/page.js
@@ -3,11 +3,15 @@ $(function() {
   // Groups (like 'java' and 'scala') represent groups of 'switchable' content, either in tabs or in regular text.
   // The catalog of groups can be defined in the sbt parameters to initialize the group.
 
-  var groupCookie = "groupsPref";
+  var groupCookie = "paradoxGroups";
   var cookieTg = getCookie(groupCookie);
-  var cookieTgList = [];
+  var currentGroups = {};
+
+  // 'reverse lookup' supergroup by group
+  var supergroupByGroup = {};
+
   if(cookieTg != "")
-    cookieTgList = JSON.parse(cookieTg);
+    currentGroups = JSON.parse(cookieTg);
 
   // http://www.w3schools.com/js/js_cookies.asp
   function setCookie(cname,cvalue,exdays) {
@@ -35,41 +39,19 @@ $(function() {
     return "";
   }
 
-  function arrayToJson(arr) {
-    return JSON.stringify(arr);
-  }
-
-  // http://stackoverflow.com/questions/12551635/jquery-remove-duplicates-from-an-array-of-strings/12551709#12551709
-  function addToList(arr, elem) {
-    function unique(list) {
-      var result = [];
-      $.each(list, function(i, e) {
-        if ($.inArray(e, result) == -1) result.push(e);
-      });
-      return result;
-    }
-    arr.unshift(elem);
-    return unique(arr);
-  }
-
   $(".supergroup").each(function() {
-    var groups = $(this).find(".group")
+    var supergroup = $(this).attr('name').toLowerCase();
+    var groups = $(this).find(".group");
 
-    var current;
-    for(var i = 0; i < cookieTgList.length && !current; i++) {
-      groups.each(function() {
-        var group = "group-" + $(this).text().toLowerCase();
-        if(group == cookieTgList[i])
-          current = group;
-      });
-    }
+    var current = currentGroups[supergroup];
     if (!current) {
       current = "group-" + groups.first().text().toLowerCase();
-      cookieTgList = addToList(cookieTgList, current);
+      currentGroups[supergroup] = current;
     }
 
     groups.each(function() {
       var group = "group-" + $(this).text().toLowerCase();
+      supergroupByGroup[group] = supergroup;
       if(group == current) {
         switchToGroup(this.value);
       } else {
@@ -100,11 +82,11 @@ $(function() {
     });
 
     var current;
-    for(var i = 0; i < cookieTgList.length && !current; i++) {
+    for (var supergroup in currentGroups) {
       dts.each(function() {
         var dt = $(this);
         var pre = dt.next("dd").find("pre");
-        if(pre.hasClass(cookieTgList[i]))
+        if(pre.hasClass(currentGroups[supergroup]))
           current = dt.addClass("current");
       });
     }
@@ -135,9 +117,13 @@ $(function() {
   });
 
   function switchToGroup(group) {
-    // Cookie:
-    cookieTgList = addToList(cookieTgList, group);
-    setCookie(groupCookie, arrayToJson(cookieTgList));
+    var supergroup = supergroupByGroup[group]
+    if (!supergroup) {
+      return;
+    }
+
+    currentGroups[supergroup] = group;
+    setCookie(groupCookie, JSON.stringify(currentGroups));
 
     // Dropdown switcher:
     $("select")