1
00:00:00,210 --> 00:00:06,520
Page nation allows you to add a page numbering system to content that stretches across multiple pages.

2
00:00:06,630 --> 00:00:15,470
This HMO page shows an example of a basic page nation style using the page nation class to create this.

3
00:00:15,480 --> 00:00:23,790
We start by making an unordered list using the UL times we assign a class attribute and set it to page

4
00:00:23,790 --> 00:00:26,190
nation.

5
00:00:26,190 --> 00:00:30,720
Next we create our list elements inside each list element.

6
00:00:30,720 --> 00:00:32,490
We have a link and the page number

7
00:00:36,600 --> 00:00:37,620
with Page nation.

8
00:00:37,620 --> 00:00:44,930
We can set different options if we wanted to show an active status on one of the page numbers.

9
00:00:44,930 --> 00:00:50,340
We can add a class attribute to the list element and set it to active.

10
00:00:50,960 --> 00:00:59,380
We'll go ahead and set and set item number two to active.

11
00:00:59,470 --> 00:01:08,430
Now if we save the file and refresh the page we can see that Page Number 2 is now active we can also

12
00:01:08,430 --> 00:01:14,420
disable a link so it cannot be clicked and we can do that by adding the disabled class.

13
00:01:17,660 --> 00:01:22,450
So if we save and refresh we can no longer click on page number three

14
00:01:27,290 --> 00:01:34,070
to resize a page a nation block the page nation large or page nation small class can be added to the

15
00:01:34,070 --> 00:01:34,760
UL tags

16
00:01:38,650 --> 00:01:42,700
we'll start with the page nation large class when we refresh it.

17
00:01:42,700 --> 00:01:50,840
You can see that the links are now larger and will change LG too small as you and see the difference.

18
00:01:53,260 --> 00:02:00,620
You can see that it's now much smaller we can also change this style of page nation to breadcrumb by

19
00:02:00,620 --> 00:02:01,910
updating the world class

20
00:02:05,610 --> 00:02:08,200
and that's what the breadcrumb style looks like.

21
00:02:11,970 --> 00:02:17,200
So I've just updated some of the labels to text labels which is more commonly used with breadcrumbs

22
00:02:19,130 --> 00:02:22,340
and so you can see that it creates a nice navigation menu.