{
  "id": "L07",
  "title": "Navigating list",
  "topic": "lists",
  "use": "A list from which the single record is opened — the most frequent case. The whole entry is a link, not an area with click handling, so keyboard, context menu and “open in new tab” work on their own. On the right stands the next icon, and it is the only sign of it. Either the entry leads on or something in it acts, never both.",
  "decisions": [
    "The whole entry is a link, not an area with click handling: only on a link do keyboard, context menu, middle click and “open in new tab” work without a line of script. ed-list-item renders one around its content for an href.",
    "One sign for “leads on”, and that is next: a check here and an arrow there turn one sign into three that no longer mean anything. The list draws it; nothing is added.",
    "Either the entry leads on or something in it acts: both in one row turn every click into a guess. Whoever needs actions per entry takes L06, and opens the record through one of them.",
    "The hover surface spans the whole row from the start: it does not pop open on hover and does not push the text aside.",
    "The identifier comes first in the primary line, as in L01, so it survives when the name is cut."
  ],
  "try": [
    {
      "do": "Move the pointer over the entries",
      "then": "the whole row lights up, and the text does not move"
    },
    {
      "do": "Go through the list with Tab",
      "then": "every entry is a stop of its own, because it is a link"
    },
    {
      "do": "Right-click an entry",
      "then": "the browser's context menu offers to open it in a new tab — without a line of script"
    },
    {
      "do": "Look at the sign on the right",
      "then": "next everywhere, nowhere a second one"
    }
  ],
  "revision": 1,
  "changes": [],
  "reviewed": true,
  "source": "<style>\n  /* One width for every head count, so the numbers end on one edge before the sign. */\n  .l07-size {\n    inline-size: 7rem;\n  }\n</style>\n\n<div class=\"ed-stack ed-gap-4\">\n  <!-- Demo only, not part of the pattern. The screen's title, and whose clients these are, come from the screen around the pattern; SC01 places them. -->\n\n  <ed-list label=\"Clients\">\n    <ed-list-item href=\"#client-104721\">\n      <span class=\"ed-text-tabular\">104721</span> Bergmann &amp; Söhne Fahrzeugtechnik GmbH &amp; Co. KG\n      <span slot=\"description\">Saarbrücken · Sophie Brandt</span>\n      <span slot=\"end\" class=\"l07-size ed-text-end ed-text-tabular\">84 employees</span>\n    </ed-list-item>\n    <ed-list-item href=\"#client-104733\">\n      <span class=\"ed-text-tabular\">104733</span> Steinbach-Wallner Immobilienverwaltung GmbH\n      <span slot=\"description\">Völklingen · Andrea Jansen</span>\n      <span slot=\"end\" class=\"l07-size ed-text-end ed-text-tabular\">12 employees</span>\n    </ed-list-item>\n    <ed-list-item href=\"#client-104688\">\n      <span class=\"ed-text-tabular\">104688</span> Odenwälder Präzisionsguss AG\n      <span slot=\"description\">Neunkirchen · Sophie Brandt</span>\n      <span slot=\"end\" class=\"l07-size ed-text-end ed-text-tabular\">31 employees</span>\n    </ed-list-item>\n    <ed-list-item href=\"#client-104802\">\n      <span class=\"ed-text-tabular\">104802</span> Dr. Kettner-Lohmeyer Zahnmedizin MVZ GmbH\n      <span slot=\"description\">Homburg · Andrea Jansen</span>\n      <span slot=\"end\" class=\"l07-size ed-text-end ed-text-tabular\">18 employees</span>\n    </ed-list-item>\n    <ed-list-item href=\"#client-104815\">\n      <span class=\"ed-text-tabular\">104815</span> Bäckerei Pfeiffer-Zimmermann e. K.\n      <span slot=\"description\">St. Ingbert · Thorsten Reinke</span>\n      <span slot=\"end\" class=\"l07-size ed-text-end ed-text-tabular\">9 employees</span>\n    </ed-list-item>\n  </ed-list>\n</div>",
  "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/l07-navigating-list/",
  "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/"
}